自動オブジェクトが接続されていませんJavascript Canvas

Question

ctx.lineTo（）で作成されたオブジェクトを描画すると、オブジェクトが終了して接続されません。あなたが見るように、私は三角形を描きました、そして、先端は平坦に見えます。しかし、そのうち2つは意味がありません。誰でも知っている理由は？前もって感謝します！

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.lineWidth = 3; 
 
ctx.strokeStyle = "orange"; 
 
ctx.beginPath(); 
 
ctx.moveTo(10,13.031); 
 
ctx.lineTo(13.5,6.969); 
 
ctx.lineTo(6.5,6.969); 
 
ctx.lineTo(10,13.031); 
 
ctx.stroke();

<canvas id="canvas"></canvas>

Answer 1

あなたは浮動小数点値を使用しているとして、あなたのxとy座標は適切ではない、ので、問題はおそらく発生しました。

あなたはそれよりスムーズ

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

 
ctx.scale(11, 11); // for better visibility 
 

 
ctx.lineWidth = 1; 
 
ctx.strokeStyle = "orange"; 
 
ctx.beginPath(); 
 
ctx.lineCap = "round"; 
 
ctx.lineJoin = "round"; 
 
ctx.moveTo(10, 13.031); 
 
ctx.lineTo(13.5, 6.969); 
 
ctx.lineTo(6.5, 6.969); 
 
ctx.lineTo(10, 13.031); 
 
//ctx.closePath() //<-- this also could be used 
 
ctx.stroke();

body{margin:0;overflow:hidden}canvas{border:1px solid #d3d3d3}

<canvas id="canvas" width="218" height="218"></canvas>

を作るためにlineCapとlineJoinメソッドを使用することができたり、あなたも前にctx.closePath()を使用することができますがctx.stroke()

Answer 2

=の代わりに第三lineToのあなたのケースでは、あなただけのctx.closePath() をする必要があり、その後、あなたは色であなたの形状を埋めることができます）

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
ctx.lineWidth = 1; 
 

 
ctx.beginPath(); 
 
ctx.moveTo(10,13); 
 
ctx.lineTo(13.5,6.969); 
 
ctx.lineTo(6.5,6.969); 
 
ctx.closePath(); 
 

 
ctx.strokeStyle = "orange"; 
 
ctx.stroke(); 
 

 
ctx.fillStyle = "orange"; 
 
ctx.fill();

<canvas id="canvas"></canvas>