在HTML 5 Canvas中更改笔触颜色

Question

I'm trying to draw a circle, kind of a clock, i start at point p1 and draw an arc in black using the canvas 2d context, when i reach the point p1 (complete circle tour) i change color to white, and continue to draw, that should give it an effect like if the black arc is being erased, however this doesn't work as expected, because when i change the context's color, everything change... 我正在尝试绘制一个圆形，一种时钟，我从点p1开始并使用画布2d上下文绘制黑色圆弧，当我到达点p1（完整的圆形游览）时我将颜色更改为白色，然后继续绘制，这应该给它一个效果就像黑色弧被删除，但这不会按预期工作，因为当我改变上下文的颜色，一切都改变...

how to keep the first circle, in a color, and draw another one on topof it with different color, without changing the color in the whole scene ? 如何保持第一个圆圈，用一种颜色，并在其上面用不同的颜色绘制另一个圆圈，而不改变整个场景中的颜色？

here's my attempt 这是我的尝试

<!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

You're having a little trouble with your angles. 你的角度有点麻烦。 You're essentially redrawing the arc from 0 to your endAngle every time. 你基本上每次都会将弧从0重新绘制到endAngle 。 So at the end when endAngle is greater than 6 you're redrawing from 0-6 with a white arc. 因此，当endAngle大于6时，你将从0-6重绘为白色圆弧。

The easy fix is to just set endAngle = 0.01 when you reset i . 简单的解决方法是在重置i时设置endAngle = 0.01 。 You may also want to update your startAngle on each iteration to be the end of your last arc, just so that it doesn't draw over itself all the time. 您可能还希望在每次迭代时将startAngle更新为最后一个弧的结束，这样它就不会一直自行绘制。

Hope this helps! 希望这可以帮助！

Answer 2

Using Shaded's answer, you could do the following: 使用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;

Because the white will anti-alias with the black behind it, you'll get the jaggies at the edges if the line widths are the same. 因为白色会与它背后的黑色反锯齿，如果线宽相同，你会在边缘处获得锯齿。 Increasing the line width alleviates this issue. 增加线宽可以缓解这个问题。

EDIT: Updated to remove excessive over-painting as per Shaded's comments. 编辑：根据Shaded的评论更新以删除过多的过度绘画。

在HTML 5 Canvas中更改笔触颜色

问题描述

2 个解决方案

解决方案1
5 已采纳 2013-04-12 15:27:44

解决方案2
2 2013-04-12 16:06:13

在HTML 5 Canvas中更改笔触颜色

问题描述

2 个解决方案

解决方案1 5 已采纳 2013-04-12 15:27:44

解决方案2 2 2013-04-12 16:06:13

解决方案1
5 已采纳 2013-04-12 15:27:44

解决方案2
2 2013-04-12 16:06:13