以前用canvas畫圖時,都是直接在canvas標籤裡直接寫上寬高,沒有問題,但也沒有探究過為什麼寬高要直接寫在canvas標籤裡,因為各個資料的例子上都是這麼寫的。今天王sir提出了一個問題:如果寬高寫在裡,看看會有什麼不同。自己試了以下,果然有問題。 先看一下程式碼: 複製程式碼程式碼如下: 程式碼如下:程式碼如下:程式碼如下: canvas <br /> body{margin:0;}<br /> canvas{ margin:20px; <br /> /*width: 400px;<br /> height: 300px;*/<br /> } <br /> <br /> function draw() {<br /> var canvas=document.getElementById('canvas');<br /> var context=canvas.getContext('2d'); context.beginPath(); context.moveTo(20,20); context.lineTo(200,100); context.lineWidth=5; context.stroke(); } 1.寬:400;高:300;直接寫在裡的效果: 2、刪除裡的寬高,寬:400;高:300;寫在裡的效果:<🎜> <🎜><🎜><🎜> <🎜> 為什麼兩者的效果會不一樣呢? <🎜> <🎜> canvas跟其他標籤一樣,也可以透過css來定義樣式。但這裡要注意的是:canvas的預設寬高為300px * 150px,在css中為canvas定義寬高,實際上把寬高為300px * 150px的畫布進行了拉伸,如果在這樣的情況下進行canvas繪圖,你得到的圖形可能就是變形的效果。所以,在canvas繪圖時,應該在canvas標籤裡直接定義寬高。 <🎜>