HTML5 Canvas Double Buffering example
중요 함수
ctx.getImageData(x, y, w, h);
- Canvas에 그려진 이미지 데이터를 가져오기 위한 함수
ctx.putImageData(imgData,x, y);
- Canvas의 x, y 위치에 imgData를 복사한다
ctx.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
함수설명은 다음 사이트의 내용을 참고했습니다
http://www.w3schools.com/tags/canvas_putimagedata.asp
JavaScript Syntax
| JavaScript syntax: | context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight); |
|---|
Parameter Values
| Parameter | Description |
|---|---|
| imgData | Specifies the ImageData object to put back onto the canvas |
| x | The x-coordinate, in pixels, of the upper-left corner of the ImageData object |
| y | The y-coordinate, in pixels, of the upper-left corner of the ImageData object |
| dirtyX | Optional. The horizontal (x) value, in pixels, where to place the image on the canvas |
| dirtyY | Optional. The vertical (y) value, in pixels, where to place the image on the canvas |
| dirtyWidth | Optional. The width to use to draw the image on the canvas |
| dirtyHeight | Optional. The height to use to draw the image on the canvas |
Canvas에 그려진 이미지 데이터를 가져와서 Canvas의 특정 위치에 다시 적용하는 예
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
Background Scrolling ( Left to Right )
인터넷에서 구했는데 어디서인지 다시 찾을 수가 없어서 해당 사이트의 주소를 링크하지 못했습니다.
사용된 배경이미지 (bg_desert.png)
bg.zip<html>
<body>
<canvas id="canvas" width="827" height="358"></canvas>
<script type="text/javascript">
var ctx = document.getElementById("canvas").getContext("2d"),
//화면에는 보이지 않는 back buffer로 사용될 Canvas 생성 및 크기 설정
canvasTemp = document.createElement("canvas"),
scrollImg = new Image(),
tempContext = canvasTemp.getContext("2d"),
imgWidth = 0,
imgHeight =0,
imageData = {},
canvasWidth = 827,
canvasHeight = 358,
scrollVal = 0,
speed =2;
// 아래의 배경이미지 width, height 크기는
// back buffer로 사용되는 Canvas와 front buffer로 사용된 Canvas의
// width, height와 동일해야 한다
scrollImg.src = "bg_desert.png";
scrollImg.onload = loadImage;
//배경이미지가 로드되면 호출되는 콜백메소드
function loadImage(){
imgWidth = scrollImg.width,
imgHeight = scrollImg.height;
canvasTemp.width = imgWidth;
canvasTemp.height = imgHeight;
//로드된 이미지를 back buffer(화면에는 보이지 않는 Canvas)에 그린다
tempContext.drawImage(scrollImg, 0,0, imgWidth, imgHeight);
imageData = tempContext.getImageData(0,0,imgWidth,imgHeight);
render();
}
function render(){
ctx.clearRect(0,0,canvasWidth,canvasHeight);
if(scrollVal >= canvasWidth-speed){
scrollVal = 0;
}
scrollVal+=speed;
// This is the bread and butter, you have to make sure the imagedata isnt larger than the canvas your putting image data to.
//back buffer에 그려진 배경이미지의 끝부분(오른쪽)을 복사해서 Canvas의 앞부분(왼쪽)에 붙여 넣는다
imageData = tempContext.getImageData(canvasWidth-scrollVal,0,scrollVal,canvasHeight);
ctx.putImageData(imageData, 0,0,0,0,scrollVal, imgHeight);
//back buffer에 그려진 배경이미지의 시작부분(왼쪽)을 복사해서 Canavas의 뒷부분(오른쪽)에 붙여 넣는다
imageData = tempContext.getImageData(0,0,canvasWidth-scrollVal,canvasHeight);
ctx.putImageData(imageData, scrollVal,0,0,0,canvasWidth-scrollVal, imgHeight);
setTimeout(function(){render();},10);
}
</script>
</body>
</html>