sitelink1 | http://blog.naver.com/shadowbug/220741582977 |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | |
extra_vars5 | |
extra_vars6 |
아래 예제는 모든 클릭한 지점에 원이 그려지는 이벤트를 작성한다.
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은 캔버스에 이미지가 그려질 경우 자동적으로 이미지를 복원해 주기 때문에,
클릭시 이미지를 그려주면 된다.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
85 | HTML5 강좌 9강 - HTML5 태그 - canvas 다각형 | 황제낙엽 | 2016.12.03 | 52 |
84 | HTML5 강좌 8강 - HTML5 태그 - canvas 선그리기 | 황제낙엽 | 2016.12.03 | 51 |
83 | HTML5 강좌 7강 - HTML5 태그 - canvas 사각형 | 황제낙엽 | 2016.12.03 | 38 |
82 | HTML5 강좌 6강 - HTML5 태그 - canvas #1 | 황제낙엽 | 2016.12.03 | 133 |
81 | HTML5 강좌 5강 - HTML5 태그 - prograss,download | 황제낙엽 | 2016.12.03 | 66 |
80 | HTML5 강좌 4강 - HTML5 태그 - mark,time,meter | 황제낙엽 | 2016.12.03 | 61 |
79 | HTML5 강좌 3강 - HTML5 레이아웃 잡아보기 | 황제낙엽 | 2016.12.03 | 51 |
78 | HTML5 강좌 2강 - HTML5 시맨틱웹을 위한 구성요소 | 황제낙엽 | 2016.12.03 | 246 |
77 | HTML5 강좌 1강 - HTML5 개념 및 기본구조 | 황제낙엽 | 2016.12.03 | 59 |
76 | HTTP 오류 코드의 종류 | 황제낙엽 | 2016.12.01 | 77 |
75 | Multiple Canvas Layer 예제 | 황제낙엽 | 2016.08.23 | 31 |
74 | Canvas 개요 | 황제낙엽 | 2016.08.22 | 69 |
73 | Canvas 확대 | 황제낙엽 | 2016.08.22 | 64 |
72 | Canvas setTransform 함수 | 황제낙엽 | 2016.08.22 | 69 |
71 | Canvas 회전 | 황제낙엽 | 2016.08.22 | 71 |
70 | Canvas 영역 선택 | 황제낙엽 | 2016.08.22 | 77 |
69 | Canvas CanvasRenderingContext2D Context 속성 | 황제낙엽 | 2016.08.22 | 19 |
68 | Canvas 도형의 클릭 이벤트 처리 | 황제낙엽 | 2016.08.22 | 263 |
67 | Canvas 이미지 추출 | 황제낙엽 | 2016.08.22 | 122 |
» | Canvas 더블버퍼링 | 황제낙엽 | 2016.08.22 | 195 |