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