DOM Canvas 더블버퍼링

황제낙엽 2016.08.22 07:13 조회 수 : 325

sitelink1 http://blog.naver.com/shadowbug/220741582977 
sitelink2  
sitelink3  
sitelink4  
extra_vars5  
extra_vars6  

아래 예제는 모든 클릭한 지점에 원이 그려지는 이벤트를 작성한다.

 

HTML 파일

초기화 이벤트와 클릭시 이벤트를 처리한다.

  1. <body onload="load(this)">

  2.     <canvas  id="draw" onclick="draw(event)" width="500px" height="500px;"></canvas>   

  3. </body>

 

javascript 

load 함수는 배경 이미지를 그려주는 이벤트이다.

draw 함수는 클릭했을 때 배열에 클릭 지점을 저장하고, 배경을 그리고 모든 클릭한 지점에 원을 그려주는 예제이다.

 

버퍼에 그림을 그리고, 마지막에 실제 캔버스에 그림을 그림으로서 깜박이는 효과를 제거하였다.

  1. // 클릭한 위치를 저장하는 배열

  2. var ptList = new Array();

  3.  

  4. // ctx, buffer ctx

  5. var ctx = null;

  6. var bufCtx = null;

  7.  

  8. // 초기 이미지

  9. var img = new Image();

  10.  

  11. function load(target) {

  12.     // 실제로 그려지는 위치의 캔버스 생성

  13.     var canvas = document.getElementById("draw");

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

  15.        

  16.     // 버퍼링용 캔버스 생성

  17.     var bufCanvas = document.createElement("canvas");

  18.     bufCtx = bufCanvas.getContext("2d");

  19.    

  20.     // 버퍼 크기 설정

  21.     bufCtx.canvas.width = ctx.canvas.width;

  22.     bufCtx.canvas.height = ctx.canvas.height;

  23.    

  24.     // 이미지 로드

  25.     img = new Image();

  26.     img.src = "/example-canvas/test.jpg";

  27.     img.onload = function() {

  28.         // 이미지가 로딩 완료시 이미지를 그려줘야 이미지가 나온다.

  29.        

  30.         // 처음 이미지 그림

  31.         // 이미지를 버퍼에 그림

  32.         bufCtx.drawImage(img, 0, 0);

  33.         // 버퍼를 캔버스에 그림

  34.         ctx.drawImage(bufCtx.canvas, 0, 0);

  35.     }

  36. }

  37.  

  38.  

  39. function draw(event) {

  40.     // 이벤트가 발생된 dom 객체의 좌표를 기준으로 한다.

  41.     var x = (event.offsetX == undefined ? event.layerX : event.offsetX);

  42.     var y = (event.offsetY == undefined ? event.layerY : event.offsetY);

  43.     var pos = new Object();

  44.     pos.x = x;

  45.     pos.y = y;

  46.     // 클릭 지점 저장

  47.     ptList.push(pos);

  48.    

  49.     // 이미지를 버퍼에 그림

  50.     bufCtx.drawImage(img, 0, 0);

  51.    

  52.     for(var i=0; i<ptList.length; i++) {

  53.         var pt = ptList[i];

  54.        

  55.         // 클릭 지점에 원을 그림

  56.         bufCtx.beginPath();

  57.         bufCtx.arc(pt.x, pt.y, 10, 0, 2*Math.PI, true);

  58.         bufCtx.closePath();

  59.         bufCtx.stroke();

  60.     }

  61.    

  62.     // 버퍼를 캔버스에 그림

  63.     ctx.drawImage(bufCtx.canvas, 0, 0);

  64.    

  65. }

  66.  

  67.  

  68.  

 

 

Q ) 왜 더블버퍼링 로직을 클릭 이벤트시에 처리하는가?

일반적인 UI 프로그래밍시 draw 이벤트를 제공하여 

이 때 그림을 그려주어야 이미지가 invalidate되더라도 다시 복원이 된다.

 

하지만 HTML은 캔버스에 이미지가 그려질 경우 자동적으로 이미지를 복원해 주기 때문에,

클릭시 이미지를 그려주면 된다.

 

번호 제목 글쓴이 날짜 조회 수
88 HTML5 강좌 12강 - HTML5 태그 - canvas 채우기 스타일,그라데이션 file 황제낙엽 2016.12.03 239
87 HTML5 강좌 11강 - HTML5 태그 - canvas 베지에곡선, 선 스타일 file 황제낙엽 2016.12.03 179
86 HTML5 강좌 10강 - HTML5 태그 - canvas 원그리기 file 황제낙엽 2016.12.03 216
85 HTML5 강좌 9강 - HTML5 태그 - canvas 다각형 file 황제낙엽 2016.12.03 137
84 HTML5 강좌 8강 - HTML5 태그 - canvas 선그리기 file 황제낙엽 2016.12.03 147
83 HTML5 강좌 7강 - HTML5 태그 - canvas 사각형 file 황제낙엽 2016.12.03 129
82 HTML5 강좌 6강 - HTML5 태그 - canvas #1 file 황제낙엽 2016.12.03 219
81 HTML5 강좌 5강 - HTML5 태그 - prograss,download file 황제낙엽 2016.12.03 150
80 HTML5 강좌 4강 - HTML5 태그 - mark,time,meter file 황제낙엽 2016.12.03 153
79 HTML5 강좌 3강 - HTML5 레이아웃 잡아보기 file 황제낙엽 2016.12.03 161
78 HTML5 강좌 2강 - HTML5 시맨틱웹을 위한 구성요소 file 황제낙엽 2016.12.03 360
77 HTML5 강좌 1강 - HTML5 개념 및 기본구조 file 황제낙엽 2016.12.03 145
76 HTTP 오류 코드의 종류 황제낙엽 2016.12.01 148
75 Multiple Canvas Layer 예제 file 황제낙엽 2016.08.23 149
74 Canvas 개요 황제낙엽 2016.08.22 204
73 Canvas 확대 file 황제낙엽 2016.08.22 150
72 Canvas setTransform 함수 황제낙엽 2016.08.22 169
71 Canvas 회전 file 황제낙엽 2016.08.22 178
70 Canvas 영역 선택 file 황제낙엽 2016.08.22 167
69 Canvas CanvasRenderingContext2D Context 속성 황제낙엽 2016.08.22 115