3

HTMLのある塗りつぶしと別の塗りつぶしの間にある既存のスペースに悩まされています。各塗りつぶしは、傾斜した側にフィットします。正確に線を埋めることを期待していますが、スペースがあります。

これはサンプルコードです：

var canvas = document.createElement("canvas");
canvas.width = 120; canvas.height = 300;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, 120, 300);
ctx.fillStyle = "#000"; ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(0, 300); ctx.lineTo(120, 300); ctx.fill();
ctx.fillStyle = "#000"; ctx.beginPath();
ctx.moveTo(120, 300); ctx.lineTo(0, 0); ctx.lineTo(120, 0); ctx.fill();

黒い三角形の間に白い線（空白）が表示されます。実際、三角形のポイントはFlashの自動生成プログラムによって作成され、Flashはスペースなしで三角形を表示できますが、HTML5は表示できません。誰かがその線を消す考えを持っていますか？

4

3 に答える 3

3

これを追加することで、三角形にストロークを追加できます。

ctx.lineWidth = 1; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke();

例： http： //jsfiddle.net/wxh4R/

// your Triangle
ctx.fillStyle = "#000"; ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(0, 300); ctx.lineTo(120, 300); ctx.fill();
// Stoke
ctx.lineWidth = 1; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke();
于 2011-07-26T11:24:51.740 に答える
1

画面のピクセルは 0 ではなく 0 と 1 の間にあるため、座標に 0.5 を追加する必要がある場合があります。詳細については、http://diveintohtml5.ep.io/canvas.html# の「Ask Professor Markup」をご覧ください。パス

于 2011-07-26T11:04:01.640 に答える