Question

我正在尝试绘制一个圆形，一种时钟，我从点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>

Answer 1

你的角度有点麻烦。您基本上每次都会将弧从0重绘为endAngle。因此，当endAngle大于6时，你将从0-6重绘为白色圆弧。

简单的解决方法是在重置endAngle = 0.01时设置i。您可能还希望在每次迭代时将startAngle更新为最后一个弧的结束，以便它不会一直自行绘制。

希望这有帮助！

Answer 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的评论更新以删除过多的过度绘画。

在HTML 5 Canvas中更改笔触颜色

2 个答案: