Html5 Canvas to Canvas Blit

我做了以下内容：

g_CanvasScreen = document.getElementById("m_Canvas"); 
g_CanvasScreenContext = g_CanvasScreen.getContext("2d"); 

g_OffScreenBackground = document.createElement("canvas"); 
g_OffScreenBackgroundContext = g_CanvasScreen.getContext("2d");

我相信这得从HMTL5页面g_CanvasScreen主屏幕画布。

我相信g_OffScreenBackground是一个新创建的内存中的画布。

一旦所有图像都加载，然后我通过调用函数画在正确的地方，背景屏幕上的所有图片：

DrawMapToBackground(g_OffScreenBackground, g_OffScreenBackgroundContext, 2000, 1600);

2000×1600的屏幕外背景的尺寸。

这会导致我不确定的事情。我相信，这将在位块传输背景画布到主屏幕：

g_CanvasScreenContext.drawImage(g_OffScreenBackground, 
    0, 0, g_OffScreenBackground.width, g_OffScreenBackground.height, 
    screenX, screenY, g_OffScreenBackground.width, g_OffScreenBackground.height);

这是最后一个函数是否正确？我可以做画布来画布吗？我应该以另一种方式做这件事吗？

来源

2013-05-30 Rewind

而不是每次重画背景，只要把2个画布放在彼此的顶部。

首先在底部画布上绘制一次背景图像。

然后使用顶部画布绘制所有“更改”图纸。

这里的代码和一个小提琴：http://jsfiddle.net/m1erickson/pSjEt/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
#container{ 
    position:relative; 
    border:1px solid blue; 
    width:500px; 
    height:300px; 
} 
.subcanvs{ 
    position:absolute; 
    width:100%; 
    height:100%; 
} 
</style> 

<script> 
$(function(){ 

    var bk=document.getElementById("background"); 
    var bkCtx=bk.getContext("2d"); 
    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var bkimg=new Image(); 
    bkimg.onload=function(){ 
     bk.width=bkimg.width; 
     bk.height=bkimg.height; 
     canvas.width=bkimg.width; 
     canvas.height=bkimg.height; 
     bkCtx.drawImage(bkimg,0,0); 
     draw(); 
    } 
    bkimg.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/skyGrass.png"; 

    var x=50; 

    function draw(){ 
     x+=5; 
     if(x>300){x=50;} 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.beginPath(); 
     ctx.arc(x,100,30,0,Math.PI*2,false); 
     ctx.strokeStyle="gold"; 
     ctx.fillStyle="yellow"; 
     ctx.lineWidth=5; 
     ctx.stroke(); 
     ctx.fill(); 
     setTimeout(draw,1000); 
    } 

}); // end $(function(){}); 
</script> 
</head> 

<body> 
    <div id="container"> 
     <canvas id="background" class="subcanvs"></canvas> 
     <canvas id="canvas" class="subcanvs"></canvas> 
    </div> 
</body> 
</html>

来源

2013-05-30 18:27:11 markE

这看起来像一个聪明的想法，但不幸的是我的正面和背面有画布旋转。 – Rewind

...并且最终它将仅仅是正在绘制的背景图像的一部分，这取决于玩家的精灵在屏幕上的位置。 – Rewind

够公平的。顺便说一句，drawimage的最后4个参数用于移动和缩放屏幕画布，因为它正在绘制到前景图像。通过提供screenX和screenY，实际上是将背景图像移动到主画布上的该坐标（主画布将不会有screenX或screenY以上的背景）。如果您不需要移动和缩放，请关闭最后4个参数。 – markE

Html5 Canvas to Canvas Blit

回答

相关问题