キャンバスラインが斜めに太いのはなぜですか？

私はthis plnkrを作成して私の問題を実証しました。私は、描かれた線が、ページの真横から斜めに描かれたときに、「太く」または「太って見える」ように見える理由を理解していません。キャンバスラインが斜めに太いのはなぜですか？

一貫した線幅でこのシェイプを描画するにはどうすればよいですか？

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
    <canvas id="canvas"></canvas> 
    </body> 
    <script src="script.js"></script> 
</html>

はCSS：

#canvas { 
    width: 100%; 
    height: 80px; 
    border: 1px solid black; 
}

JS（線幅がちょうど始まるを描画する前に一度 '5' に設定されていることに注意してください）。：

(function() { 
    var canvas = document.getElementById('canvas'); 
    if (!canvas.getContext) { 
     // browser does not support HTML canvas 
     return; 
    } 
    var ctx = canvas.getContext("2d"); 
    ctx.strokeStyle = "#000000"; 
    ctx.lineWidth = 5; 
    ctx.beginPath(); 
    ctx.lineTo(0, canvas.height - 10); 
    var twoThirds= (canvas.width/3) * 2; 
    var oneSixth= (canvas.width/6); 
    ctx.lineTo(twoThirds, canvas.height - 10); 
    ctx.lineTo(twoThirds + oneSixth, 5); 
    ctx.lineTo(canvas.width-3, canvas.height - 10); 
    ctx.stroke(); 
})();

出典

2017-01-10 Dan Schnau

**「キャンバスをCSSでサイズ変更しないでください」** *正しく動作させる方法を理解するまで* – Kaiido

「キャンバスはCSSを使用しているが、「幅」/「高さ"プロパティ]（http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties） – Kaiido

私はキャンバスのサイズを変更していませんか？確かに、キャンバス幅が '100％'ではなく固定ピクセル幅であるときに問題が発生することを確認しました。 –

あなたのキャンバスには、サイズの仕方によって正方形の「ピクセル」がありません。

これはフラットラインでは表示されませんが、斜線で表示されます。

HTMLキャンバス要素には、設定が必要な幅と高さのプロパティがあります。

ここにあなたの変更されたコードがあります。

new version

#canvas { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
}

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

あなたが応答キャンバスをしたい場合、あなたはそれがサイズを変更するたびに、幅と高さのプロパティを更新する必要があります。

出典

2017-01-14 02:34:59 gburton

キャンバスラインが斜めに太いのはなぜですか？

答えて

関連する問題