Html5 Canvas到Canvas Blit
Html5 Canvas到Canvas Blit
提问于 2013-05-31 02:08:12
我需要设置一个背景画布，在不同的地方绘制了大量的图像。在这个背景下没有什么变化，所以我想一次完成所有的工作。我想我知道该怎么做。然后，我想要将背景画布(最终只是其中的一部分)复制到我的主屏幕画布上。
我正在做以下工作：
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);最后一个函数正确吗？我可以做一个canvas到canvas blit吗？我应该用另一种方式来做这件事吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-05-31 02:27:11
而不是每次都重新绘制背景，只需将两个画布放在彼此的顶部。
首先在底部画布上绘制一次背景图像。
然后用上面的画布画出你所有的“改变”的图画。
下面是代码和一个提琴：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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16843105
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号