您如何每 x 秒在另一个画布或图像上重新绘制画布

How do you redraw a canvas on top of another canvas or image every x seconds?

本文关键字：新绘制 绘制 图像 另一个 何每      更新时间：2023-09-26

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

现在从t=0开始，我想在这个画布的顶部绘制从x,y=0,0开始的正方形，每个正方形之间有10px的空间。

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

等等

您如何每隔 x 秒自动执行此操作？也许将两个画布元素放在彼此身上，这可能吗？

我想这是你想要的，一个移动的广场。

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 位置的矩形即可。

相关文章：