如何每隔x秒在另一个画布或图像上重绘画布？

Question

假设我们在画布html div上绘制了一个图像。

现在从t=0开始，我希望从此画布顶部的x,y=0,0开始绘制正方形，每个正方形之间的空格为10px。

在t=1，我想删除旧方块并重新绘制以x,y=1,1

开头的新方块

等等

如何在x秒后自动执行此操作？或许把两个画布元素放在一起，这可能吗？

Answer 1

我想这就是你想要的东西，一个动人的广场......

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);

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