아래 예제는 모든 클릭한 지점에 원이 그려지는 이벤트를 작성한다.
HTML 파일
초기화 이벤트와 클릭시 이벤트를 처리한다.
-
<body onload="load(this)">
-
<canvas id="draw" onclick="draw(event)" width="500px" height="500px;"></canvas>
-
</body>
javascript
load 함수는 배경 이미지를 그려주는 이벤트이다.
draw 함수는 클릭했을 때 배열에 클릭 지점을 저장하고, 배경을 그리고 모든 클릭한 지점에 원을 그려주는 예제이다.
버퍼에 그림을 그리고, 마지막에 실제 캔버스에 그림을 그림으로서 깜박이는 효과를 제거하였다.
-
// 클릭한 위치를 저장하는 배열
-
var ptList = new Array();
-
-
// ctx, buffer ctx
-
var ctx = null;
-
var bufCtx = null;
-
-
// 초기 이미지
-
var img = new Image();
-
-
function load(target) {
-
// 실제로 그려지는 위치의 캔버스 생성
-
var canvas = document.getElementById("draw");
-
ctx = canvas.getContext("2d");
-
-
// 버퍼링용 캔버스 생성
-
var bufCanvas = document.createElement("canvas");
-
bufCtx = bufCanvas.getContext("2d");
-
-
// 버퍼 크기 설정
-
bufCtx.canvas.width = ctx.canvas.width;
-
bufCtx.canvas.height = ctx.canvas.height;
-
-
// 이미지 로드
-
img = new Image();
-
img.src = "/example-canvas/test.jpg";
-
img.onload = function() {
-
// 이미지가 로딩 완료시 이미지를 그려줘야 이미지가 나온다.
-
-
// 처음 이미지 그림
-
// 이미지를 버퍼에 그림
-
bufCtx.drawImage(img, 0, 0);
-
// 버퍼를 캔버스에 그림
-
ctx.drawImage(bufCtx.canvas, 0, 0);
-
}
-
}
-
-
-
function draw(event) {
-
// 이벤트가 발생된 dom 객체의 좌표를 기준으로 한다.
-
var x = (event.offsetX == undefined ? event.layerX : event.offsetX);
-
var y = (event.offsetY == undefined ? event.layerY : event.offsetY);
-
var pos = new Object();
-
pos.x = x;
-
pos.y = y;
-
// 클릭 지점 저장
-
ptList.push(pos);
-
-
// 이미지를 버퍼에 그림
-
bufCtx.drawImage(img, 0, 0);
-
-
for(var i=0; i<ptList.length; i++) {
-
var pt = ptList[i];
-
-
// 클릭 지점에 원을 그림
-
bufCtx.beginPath();
-
bufCtx.arc(pt.x, pt.y, 10, 0, 2*Math.PI, true);
-
bufCtx.closePath();
-
bufCtx.stroke();
-
}
-
-
// 버퍼를 캔버스에 그림
-
ctx.drawImage(bufCtx.canvas, 0, 0);
-
-
}
-
-
-
Q ) 왜 더블버퍼링 로직을 클릭 이벤트시에 처리하는가?
일반적인 UI 프로그래밍시 draw 이벤트를 제공하여
이 때 그림을 그려주어야 이미지가 invalidate되더라도 다시 복원이 된다.
하지만 HTML은 캔버스에 이미지가 그려질 경우 자동적으로 이미지를 복원해 주기 때문에,
클릭시 이미지를 그려주면 된다.
