アークへの同じ呼び出しにより異なるサイズが生成される

StackOverflow https://stackoverflow.com/questions/8843567

  •  27-10-2019
  •  | 
  •  

質問

図形を描画し、その上に新しい色で描画し（強調表示するかのように）、元の形状を再描画すると（強調表示を解除して）、強調表示された色の痕跡が残る理由を理解しようとしています。

で問題を再現しました このフィドル. 。くさびは水色で描画されます。上に赤で描画する赤いボタンがあり、次に元の形状を再描画する別のボタンがあります。すべてのパラメータは（色を除いて）同一ですが、ボタンをクリックして色をリセットすると、ウェッジの上にかすかに赤い跡が残ります。

前に：

enter image description here

後：

enter image description here

関連するコードは次のとおりです。

drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)");

$("#red").click(function () {
    drawWedge(250, 250, 200, 0, 18, "rgb(255, 0, 0)");
});

$("#back").click(function () {
    drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)");
});

function d2r(degrees) {
    return degrees * (Math.PI / 180.0);
}

function drawWedge(centerX, centerY, r, start, end, color) {
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.arc(centerX, centerY, r, d2r(start), d2r(end), false);
    context.closePath();
    context.fillStyle = color;
    context.fill();
}
役に立ちましたか？

解決

キャンバスに描画すると、そのままになります クリアするまで物を積み重ねる. 。それをクリアする最も簡単な方法は、 ctx.clearRect(0,0,width,height)

これをdrawWedge関数に入れます。

http://jsfiddle.net/X7deh/1

他のヒント

この質問はすでに回答されていますが、もう少し詳しく説明したいと思います。

enter image description here

対角線で描画すると、ピクセルの「部分」が通過します (私の例を参照)。それでは、ブラウザは図形の外側のピクセル部分に対して何を行うのでしょうか?アンチエイリアスを使用して (ブラウザーのデフォルトではアンチエイリアスが常にオンになっています)、ピクセルの残りの部分に色を付けます (アンチエイリアスを使用していない場合、線はギザギザに見えます)。お気づきかと思いますが、かすかな赤の痕跡は、アンチエイリアスによってブレンドされているため、明るい赤ではありません。そして、それが見える理由は、キャンバス上に形状を描くときに、かすかな赤の痕跡が形状の一部ではなく、形状の外側のピクセルの一部であるためです。

回答で述べたように、今すぐ電話をかけることができます clearRect キャンバスをクリアします。ただし、これを読んでください それで質問 物事をより詳細に説明しているためです（選択された回答は2番目の回答ほど良くありません）。また、なぜそれを「キャンバス」と呼ぶのか疑問に思ったことはありますか?アーティストが使用する実際のアート キャンバスを考えてください。一度キャンバスにペイントすると、新しいキャンバスを入手するか、その上にペイントしない限り、それを剥がすことはできません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top