我正在尝试动画一个圆圈,只是水平移动它,工作正常.然而,当圆圈移动时,我必须对该圆圈执行clearRect,以便在水平方向上重新绘制它.当我做一个clearRect时,它也会使背景周围有白框,这样它就会在圆圈移动的方向上成为一条白色的水平线.
还有其他解决方法吗?
function drawcircle() {
clear();
context.beginPath();
context.arc(X, Y, R, 0, 2*Math.PI, false);
context.moveTo(X,Y);
context.lineWidth = 0.3;
context.strokeStyle = "#999999";
context.stroke();
if (X > 200)
{
clearTimeout(t); //stop
}
else
{
//move in x dir
X += dX;
t = setTimeout(drawcircle, 50);
}
}
function clear() {
context.clearRect(X-R, Y-R, 2*R, 2*R);
}
Run Code Online (Sandbox Code Playgroud) 我使用HTML5 canvas如下:
我有那部分一切正常.现在我想要做的是删除红色矩形并恢复原来在它后面的图像背景.我是画布的新手并且阅读了相当数量,但是我看不出怎么做.那说我相信它一定很简单.