canvas #3 삼각형 그리기 - 터치 이벤트

2013. 2. 20. 16:32

<%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%>

<!doctype html>

<head>

<title>Canvas Test</title>

</head>

<body>

// 캔버스 객체 취득

var canvas = document.getElementById("myCanvas");

// 이미지 컨텍스트 취득

var ctx = canvas.getContext("2d");

canvas.onmousedown = function(e) {

//alert("클릭!");

//터치한 좌표 취득

var x = e.x;

var y = e.y;

//alert("(" + x + "," + y + ")");

var r = Math.random() * 10 + 5; //5~15사이의 난수

//패스설정

ctx.beginPath();

ctx.moveTo(x, y);

ctx.lineTo(x, y+r);

ctx.lineTo(x+r, y+r);

ctx.lineTo(x, y);

//그리자!

ctx.strokeStyle="red";

ctx.stroke();

};

</script>

</body>

</html>

Hyungu Im