javascript - 如何每隔 x 秒在另一个 Canvas 或图像之上重新绘制一个 Canvas ？

Question

假设我们在 canvas html div 上绘制了图像。

现在从t=0开始，我想绘制从 x,y=0,0 开始的正方形在此 Canvas 上，空间为 10px每个方 block 之间。

在t=1 ，我想删除旧的方 block 并重新绘制从 x,y=1,1 开始的新方 block 。

等等

如何在每次x时自动执行此操作秒？也许将两个 Canvas 元素放在一起，这可能吗？

Answer 1

我想这就是你想要的东西，一个移动的方 block ..

http://jsfiddle.net/naeemshaikh27/ru8kthn6/

var pos=0;
var time=500;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
setInterval(function(){
    ctx.beginPath();
ctx.clearRect(pos-2,pos-2,20,20);
ctx.stroke();
ctx.rect(pos,pos,10,10);
ctx.stroke();
pos++;

}, time);

您不需要为此重叠两个 Canvas 元素，只需删除并添加另一个 x,y 位置增加的矩形即可。