canvas的默認(rèn)畫布大小為300×150扁眯，通常我們想要自定義寬高都是在canvas標(biāo)簽中設(shè)置的业汰，類似于這樣：
<canvas id="line" width="600" height="200">
今天突發(fā)奇想地在style中用CSS代碼中設(shè)置了畫布的大姓骼洹：
canvas {
width: 600px;
height: 200px;
}
在style設(shè)置寬高之后的效果
然后繪制的線出現(xiàn)了鋸齒和模糊寂拆，當(dāng)然小白開始懷疑是不是自己設(shè)置的線太寬了，結(jié)果發(fā)現(xiàn)設(shè)置為1的時候仍然處于模糊效果淹真，并且設(shè)置線的高度大于150的時候會顯示不出來:
//畫坐標(biāo)軸
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,200);
// ctx.moveTo(0,200);
ctx.lineTo(500,200);
ctx.stroke();
原本我以為是因為沒加上moveTo導(dǎo)致起點不準(zhǔn)確的原因讶迁，可是翻了資料明明發(fā)現(xiàn)默認(rèn)起點就是上一條線的結(jié)束點呀，隨后上網(wǎng)找度娘之后發(fā)現(xiàn)了原因：
這是因為核蘸，使用CSS設(shè)置畫布的大小會導(dǎo)致畫布按比例縮放你設(shè)置的值巍糯。（CSS只是設(shè)置canvas在屏幕的顯示大小）
解決方法：在繪制之前值纱，首先設(shè)置canvas的寬度
var canvas = document.getElementById("line");
var width = canvas.offsetWidth;
// 計算畫布的高度
var height = canvas.offsetHeight;
// 設(shè)置寬高
canvas.width = width;
canvas.height = height;
或者是一開始就在行內(nèi)設(shè)置畫布的寬高就可。
效果正常啦
參考文章1
參考文章2
