帆布元素線條不直？

我想畫一個畫布上的元素，但是每當我畫畫布時，線條就會變成褪色而不是粗體。我不明白爲什麼會發生這種情況與我的代碼..每當我用W3schools的代碼嘗試它時，它變得很好。這是我的代碼和下面的圖片。帆布元素線條不直？

enter image description here

<!DOCTYPE html> 
<html> 
<head> 
    <title>Talk Walk</title> 
    <style type="text/css"> 
    #canvas { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     height: 500px; 
     width: 750px; 
     background-color: blue; 
    } 
    </style> 
</head> 
<body> 
    <canvas id="canvas"></canvas> 
    <script> 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext("2d"); 
    ctx.fillStyle = "green"; 
    ctx.fillRect(0,0,150,75); 
    </script> 
</body> 
</html>

來源

2014-10-29 John Smatch

您使用哪個瀏覽器？ – pbaldauf 2014-10-29 10:37:05

這裏的問題是，有一些走樣去，當你繪製矩形上。
發生這種情況是因爲綠色矩形的「邊緣」沒有完全繪製在像素上。通常情況下，你不會真正看到它，但因爲你是通過使用CSS伸出畫布設置它的寬度和高度，你會得到這樣的結果：

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.fillStyle = "green"; 
 
ctx.fillRect(0,0,150,75);

#canvas { 
 
    height: 500px; 
 
    width: 750px; 
 
    background-color: blue; 
 
}

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

爲了解決這個問題，使用width和height HTML屬性，而不是CSS：

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.fillStyle = "green"; 
 
ctx.fillRect(0,0,150,75);

#canvas { 
 
    background-color: blue; 
 
}

<canvas id="canvas" height="500" width="750"></canvas>

這適當地縮放畫布，所以別名（如果放大時仍然存在）不會放大。

來源

2014-10-29 10:37:43 Cerbrus

帆布元素線條不直？

回答

相關問題