canvas畫線變粗變模糊的解決辦法
阿新 • • 發佈：2020-10-11
自己寫的小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas動畫</title>
<style type="text/css">
#canvas {
width: 500px;
height: 500px;
border: 1px dashed #000000;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.lineWidth=1;
// ctx.strokeStyle='#fff000';
//line
ctx.moveTo(0, 140);
ctx.lineTo(30, 100);
ctx.stroke();
</script>
</body>
</html>
結果：
canvas的邊框是1px，畫布上的線寬設定也是1px，但明顯畫布上的線變粗變模糊了，而且canvas的寬高與線條起點的定位很不相符，查詢各種原因發現：canvas沒有設定height與width，css中設定的height與weight對canvas不管用。
修改canvas標籤<canvas id="canvas" width="500" height="500"></canvas>
結果：
顯示正常