Geek asks and answers

Change the color of a stroke in HTML 5 Canvas

I am trying to draw a circle, a clock view, I start at p1 and draw an arc in black using the canvas 2d context, when I reach p1 (full circular tour), I change color to white, and continue to draw, which should give it an effect , as if the black arc was erased, however this does not work properly, because when I change the color of the context, everything changes ...

how to save the first circle in color and draw another on top of it with a different color without changing the color throughout the scene?

here is 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>
+5
source share
2 answers

. 0 endAngle . , , endAngle 6, 0 6 .

endAngle = 0.01, reset i. startAngle , .

, !

+5

, :

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;

, , . .

: , .

+2

More articles:


All Articles