5

我正在尝试画一个圆，一种时钟，我从点 p1 开始并使用画布 2d 上下文绘制一个黑色的弧线，当我到达点 p1（完整的循环游览）时，我将颜色更改为白色，然后继续绘制，这应该会给它一种效果，就像黑色弧线被擦除一样，但是这不能按预期工作，因为当我改变上下文的颜色时，一切都会改变......

如何在不改变整个场景的颜色的情况下保持第一个圆圈的颜色，并在其上用不同的颜色绘制另一个圆圈？

这是我的尝试

<!DOCTYPE html />
<html>
<head>
<title></title>
<script type="text/javascript">
        var i = 0.01;
        var Color = "Black";
        var x = 75;                // x coordinate
        var y = 75;                // y coordinate
        var radius = 20;                    // Arc radius
        var startAngle = 0;                     // Starting point on circle
        var anticlockwise = false; // clockwise or anticlockwise

        function draw() {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

                ctx.beginPath();
                var endAngle = i; // End point on circleMath.PI + (Math.PI * 5) /

                if (Math.floor(endAngle) >= 6) {
                    i = 0.01;
                    if (Color == "Black") {
                        Color = "White";
                    } else {
                        Color = "Black";
                    }
                }

                ctx.strokeStyle = Color;
                ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
                ctx.stroke();

                i = i + 0.05;
                //document.getElementById('display').innerHTML = Math.floor(endAngle) + " " + Color;
    }

</script>
</head>
<body onload="window.setInterval(function(){draw()},100);">
<canvas id="canvas" width="150" height="150"></canvas>
<span id="display"></span>
</body>
</html>
4

2 回答 2

5

你的角度有点问题。您基本上endAngle每次都将弧线从 0 重新绘制到您的。因此，最后当 endAngle 大于 6 时，您将使用白色弧线从 0-6 重新绘制。

简单的解决方法是endAngle = 0.01在重置时设置i。您可能还希望startAngle在每次迭代中更新您的最后一个弧的结束，这样它就不会一直在自己身上绘制。

希望这可以帮助！

于 2013-04-12T15:27:44.427 回答
2

使用 Shaded 的答案，您可以执行以下操作：

if (Math.floor(endAngle) > 6.0) {
    i = 0.01;
    endAngle = i;
    startAngle = 0;
    if (Color == "Black") {
        Color = "White";
        ctx.lineWidth = 4;
    } else {
        Color = "Black";
        ctx.lineWidth = 1;
    }
}

ctx.strokeStyle = Color;
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.stroke();

startAngle = endAngle - 0.1;

因为白色会与后面的黑色抗锯齿，所以如果线宽相同，您会在边缘看到锯齿。增加线宽可以缓解这个问题。

编辑：更新以根据 Shaded 的评论删除过度的过度绘画。

于 2013-04-12T16:06:13.383 回答