我正在尝试解决我的 HTML5 Canvas 动画中出现的一个奇怪的问题。我试图用相互跟随的线条包围文本。当我清除第三行时,还有一行仍然存在,好像 clearRect()
没有正常工作。
我已经用 google 搜索过,我的绘图函数确实分别使用了 beginPath()
和 closePath()
,所以你可以想象当这件事不清楚时我的沮丧。
我希望有人能帮我看看这个动画哪里出了问题。
这是绘制代码的示例(因为如果我链接到 JSFiddle,堆栈溢出迫使我将代码放在这里)
function drawArc(xPos, yPos,
radius,
startAngle, endAngle,
anticlockwise,
lineColor, fillColor) {
var startAngle = startAngle * (Math.PI / 180);
var endAngle = endAngle * (Math.PI / 180);
var radius = radius;
context.strokeStyle = lineColor;
context.fillStyle = fillColor;
context.lineWidth = 1;
context.beginPath();
context.arc(xPos, yPos,
radius,
startAngle, endAngle,
anticlockwise);
context.fill();
context.closePath();
}
function drawLine(xStartPos, yStartPos, xEndPos, yEndPos, width, color) {
context.stokeStyle = color;
context.lineWidth = width;
context.beginPath();
context.moveTo(xStartPos, yStartPos);
context.lineTo(xEndPos, yEndPos);
context.stroke();
context.closePath();
}
JSFiddle:https://jsfiddle.net/xtkbnxx5/9/
在这个版本中,动画似乎停在了错误的位置。但是,如果您在 javascript 中注释掉第 126 行并再次运行它,您会看到该行就在那里并且永远不会被清除...
如有任何帮助,我们将不胜感激。
最佳答案
您的 context.clearRect(...) 语句没有清除整个 Canvas 。
当我将 clearRect 语句更改为
context.clearRect(0,0, canvas.width, canvas.height);
然后第二行最终消失了。
关于javascript - 行未从 HTML5 Canvas 中清除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38925914/