0

以下のURLには、2本の線を引く小さなサンプルがあります。上の線は緑、下の線は青になると思います。しかし、それらは両方とも青です。なんで？

http://jsfiddle.net/rj8Ab/

編集 以下のスクリプトも追加します。

var canvas = document.getElementById('canvas');
canvas.width = 500;
canvas.height = 500;

var ctx = canvas.getContext('2d');

ctx.globalAlpha = 1;
ctx.globalCompositeOperation = "source-over";

var x1=10, y1=10, width=100, height=100;

ctx.lineWidth = "5";

//draw green line
ctx.strokeStyle = "#00FF00";
ctx.moveTo(x1 + 1, y1 + 1);
ctx.lineTo(x1 + width - 2, y1 + 1);
ctx.stroke();

//draw blue line
ctx.strokeStyle = "#0000FF";
ctx.moveTo(x1 + 1, y1 + 10);
ctx.lineTo(x1 + width - 2, y1 + 10);
ctx.stroke();
4

2 に答える 2

1

必要に応じて、新しいパスを開始する必要があります。.stroke自動的には開始されません：http: //jsfiddle.net/rj8Ab/2/。

//draw blue line
ctx.beginPath();

現在、パスは2行目で拡張されているため、新しいパスは2行で構成されています。最初に一番上の線を緑に撫で、その後、パスを延長して青に撫でます（現在は両方の線で構成されています）。明らかに、緑色の線は「上書き」されています。

于 2012-06-30T17:42:36.100 に答える
0

最初のバーは緑色で描画されますが、その後青色に変更されます。

www.williammalone.comで見られるように

//draw green line
ctx.beginPath();
ctx.moveTo(x1 + 1, y1 + 1);
ctx.lineTo(x1 + width - 2, y1 + 1);
ctx.closePath();
ctx.strokeStyle = "#00FF00";
ctx.stroke();
//draw blue line
ctx.beginPath();
ctx.moveTo(x1 + 1, y1 + 10);
ctx.lineTo(x1 + width - 2, y1 + 10);
ctx.closePath();
ctx.strokeStyle = "#0000FF";
ctx.stroke();
于 2012-06-30T18:12:18.613 に答える