爲什麼帆布線在一個角度上變粗？

我做了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畫布」 ** *至少直到你明白如何使它正常工作*使用CSS的時候，但 – Kaiido

[畫布的可能重複拉伸正常的，「寬度」 /「高度「性質（http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties） – Kaiido

我不是，雖然調整畫布？可以肯定的是，當畫布寬度是固定像素寬度而不是'100％'時，我驗證了問題仍然存在。 –

由於您的尺寸大小，您的畫布沒有方形「像素」。

你不能看到這條扁線，但對角線顯示它。

HTML canvas元素具有需要設置的屬性寬度和高度。

這是您的修改代碼。

new version

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

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

如果你想有一個響應的畫布，你需要時，它改變大小更新width和height屬性。

來源

2017-01-14 02:34:59 gburton

爲什麼帆布線在一個角度上變粗？

回答

相關問題