HTML5のキャンバスのストロークの色を変更する

私は、点p1から始まり、点p1から始まり、点p1に到達するとキャンバスの2dコンテキストを使用して黒で円弧を描画しますツアー）私は色を白に変えて描き続けますが、黒アークが消去されているような効果を与えるはずですが、これは期待通りには機能しません。HTML5のキャンバスのストロークの色を変更する

最初の円を色で保持し、別の色でその上に別の色を描画する方法、シーン全体の色を変更することはありませんか？

は、ここでは、あなたの角度で少し問題を抱えている私の試み

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

出典

2013-04-12 joe

です。あなたは本質的に0からあなたのendAngleに弧を描き直しています。したがって、endAngleが6より大きい場合、0〜6から白い円で再描画します。

iをリセットすると簡単に修正するのはendAngle = 0.01です。最後の弧の終わりになるように、反復ごとにstartAngleを更新することもできます。これは、それ自体が常に描画されないようにするためです。

希望すると便利です。シェーディングの答えを使用して

出典

2013-04-12 15:27:44 Shaded

私は、@ ShadedのstartAngleの更新の提案を使って、これを再生するために[fiddle]（http://jsfiddle.net/r8afe/）を作った。これはあなたの問題を解決しますが、いくつかの点を示しています：反時計回りはこれで動作しません（私たちはendAngleとstartAngleを交換する必要があります）、明るい色は暗い色を上書きせず、それ。また、図面の隙間を避けるために、条件を「Math.Floor = 6」から「endAngle> = 2 * Math.PI」のより正確なものに変更しました。 –

あなたのおかげです。ここに更新がありますが、それは本当ですスコット、色はブレンドしています:) http://jsfiddle.net/Wzt38/ – joe

Fyi、それは混合問題ではなくアンチエイリアスです。しかし、それは完全には上書きされないというのはまだ奇妙です。 –

、あなたが次のことを行うことができます：

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;

その背後にある黒と白の意志アンチエイリアスため、線幅が同じであれば、あなたが縁でジャギーを取得します。線幅を大きくすると、この問題が緩和されます。

EDIT： Shadedのコメントに従って過度のオーバーペインティングを削除するように更新されました。

出典

2013-04-12 16:06:13 XGundam05

私はこれを試しましたが、それでもまだ黒い線が目に見える状態で問題が続くと思われます：\ – Shaded

奇妙なことに、ここでうまくいくと思われます[Fiddle]（http://jsfiddle.net/XGundam05/fHUKa/）。私はChromeを使用しています。 – XGundam05

ええと...奇妙なのは私もクロムにいるし、あなたのフィドルも私のために働く...私は違いを見つけることができない！ – Shaded

HTML5のキャンバスのストロークの色を変更する

答えて

関連する問題