DOM Canvas 더블버퍼링

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

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은 캔버스에 이미지가 그려질 경우 자동적으로 이미지를 복원해 주기 때문에,

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

 

이 게시물을
목록
쓰기 태그