function drawRect() {
var canvas = document.getElementById("drawERCanvas");
var context = canvas.getContext("2d");
var size = 100;
var left = (canvas.width - size) * 0.5;
var top = (canvas.height - size) * 0.5;
context.beginPath();
context.fillStyle = "#EF8B47";
context.rect(left, top, size, size);
context.fill();
context.font = "12pt Calibri";
context.fillStyle = "black";
context.fillText("down position ::: none", 10, 15);
context.fillText("is down in rect : false", 10, 30);
var event = window.event;
canvas.addEventListener("mousedown", function(event){
var canvasPos = getCanvasPos(canvas);
var mouseX = event.clientX - canvasPos.left + window.pageXOffset;
var mouseY = event.clientY - canvasPos.top + window.pageYOffset;
var right = left + size;
var bottom = top + size;
var isDownInRect = false;
if(mouseX >= left && mouseX <= right
&& mouseY >= top && mouseY <= bottom) {
isDownInRect = true;
} else {
isDownInRect = false;
}
context.clearRect(0, 0, 300, 60);
context.font = "12pt Calibri";
context.fillStyle = "black";
context.fillText("down position ::: x : " + mouseX + " y : " + mouseY, 10, 15);
context.fillText("is down in rect : " + isDownInRect, 10, 30);
}, false);
}
function getCanvasPos(canvas) {
var obj = canvas;
var top = 0;
var left = 0;
while (obj.tagName != "BODY")
{
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
return {
top: top,
left: left
};
}
<head>에서 drawRect() 메서드와 getCanvasPos() 메서드를 정의하고, <body>에서 drawRect() 실행.
마우스 다운 시 마우스 좌표가 사각형 영역안에 있는지를 체크.
마우스 좌표를 text로 표시하는거와 같이 화면의 변화가 있을 때, canvas에 그려져있는 것 지우고 다시 그려야 한다. (context.clearRect(0, 0, 300, 60) 그래서 이거 사용)
'web' 카테고리의 다른 글
| HTML5 마우스 다운 이벤트 - 다운시 도형 변경 (0) | 2014.05.10 |
|---|---|
| HTML5 마우스 다운 이벤트 - context.isPointInPath()로 체크 (0) | 2014.05.10 |
| HTML5 원 그리기 (0) | 2014.05.09 |
| HTML5 사각형 그리기 (0) | 2014.05.09 |
| HTML5 삼각형 그리기 (0) | 2014.05.09 |