1

我需要设置一个背景画布，其中包含在不同位置绘制的大量图像。在这个背景下没有任何变化，所以我想一次性完成。我想我知道该怎么做。然后每一帧我想把背景画布（最终只是它的一部分）复制到人们看到的我的主屏幕画布上。

我正在执行以下操作：

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 x 1600 是离屏背景的大小。

这导致了我不确定的事情。我相信这会将背景画布传送到主屏幕：

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

这最后一个功能正确吗？我可以做一个画布到画布blit吗？我应该以另一种方式这样做吗？

4

1 回答 1

2

不必每次都重绘背景，只需将 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-30T18:27:11.083 回答