function addEvent2(config) {
var event = window.event;
var canvas = config.canvas;
var context = config.context;
var left = config.left;
var top = config.top;
var size = config.size;
var type = 0;
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;
}
if(!isDownInRect)return;
type++;
if(type > 2) type = 0;
context.clearRect(left, top, size, size);
drawRect2(context, left, top, size, "#87EF87");
if(type == 0) {
drawRect2(context, left + size * 0.4 * 0.5, top + size * 0.4 * 0.5,
size * 0.6, "#EF8787");
} else if(type == 1) {
drawTriangle2(context, left, top, size, "#8787EF");
} else if(type == 2) {
drawCircle2(context, left, top, size, "#EF87EF");
}
}, false);
}
function init() {
var canvas = document.getElementById("drawER2Canvas");
var context = canvas.getContext("2d");
var size = 100;
var left = (canvas.width - size) * 0.5;
var top = (canvas.height - size) * 0.5;
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.fillStyle = "#EFEF87";
context.rect(left, top, size, size);
context.fill();
context.font = "12pt Calibri";
context.fillStyle = "black";
context.fillText("click rectangle to change shape", 10, 15);
return {
canvas: canvas,
context: context,
size: size,
left: left,
top: top
}
}
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
};
}
function drawRect2(context, left, top, size, color) {
context.beginPath();
context.fillStyle = color;
context.rect(left, top, size, size);
context.fill();
}
function drawTriangle2(context, left, top, size, color) {
context.beginPath();
context.fillStyle = color;
context.moveTo(left + size * 0.5, top + size * 0.2);
context.lineTo(left + size * 0.8, top + size * 0.8);
context.lineTo(left + size * 0.2, top + size * 0.8);
context.closePath();
context.fill();
}
function drawCircle2(context, left, top, size, color) {
context.beginPath();
context.arc(left + size * 0.5, top + size * 0.5, size * 0.3, 0, Math.PI * 2, true);
context.fillStyle = color;
context.fill();
}
<head>에서 메서드들 정의하고 <body>에서 addEvent2(init()); 실행.
변수 type을 변화 시켜서 각 도형들을 변경 시킨다(0일때 사각형, 1일때 삼각형, 2일때 원).
사각형영역에서 마우스 다운을 했을때, 사각형 영역만 지우고( context.clearRect(left, top, size, size); ), 사각형 영역과 해당 도형을 다시 그린다.
'web' 카테고리의 다른 글
| Linear Tween (0) | 2014.08.26 |
|---|---|
| Motion, Tweening and Easing (0) | 2014.06.08 |
| HTML5 마우스 다운 이벤트 - context.isPointInPath()로 체크 (0) | 2014.05.10 |
| HTML5 마우스 다운 이벤트 - 사각형 영역 체크 (0) | 2014.05.10 |
| HTML5 원 그리기 (0) | 2014.05.09 |