最近在學習canvas屬性中遇到一個小問題，就是canvas的width和height設置問題
代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 #canvas{ 12 width: 200px; 13 height: 200px; 14 background: #0f0; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas id="canvas"></canvas> 20 <script> 21 var c=document.getElementById('canvas'); 22 var context=c.getContext('2d');。 23 context.moveTo(0,0); 24 context.lineTo(200,200); 25 context.stroke(); 26 </script> 27 </body> 28 </html>
代碼看上去沒有問題，按照預想的話，應該會出現一個連接（0，0）和（200，200）兩個坐標的斜線。
但結果是：
終點坐標直接指向了（100，200）的位置。
於是我嘗試用
<canvas id="canvas" style="width: 200px;height: 200px;" >
去定義canvas，發現結果還是一樣的。
當我不設置寬高時，發現canvas的寬高默認為300*150
我直接設置canvas的寬高屬性：
<canvas id="canvas" width="200" height= "200" >
這樣就沒有問題了。
通過上述嘗試我得出一些我的結論（錯了勿噴）：
因為canvas自己有默認寬高，當用嵌入式或者內聯式改變寬高時，canvas會按比例改變。可以看作連線是最開始進行的，此時連線是從（0,0）到（200,200）
但是因為200已經超過canvas的默認高度，所以在canvas中他的終點在（150，150）
所以改變canvas寬度為200之后，斜線終點仍然是寬度的一半，為（100，150）
同理，改變了canvas的高度，就只是高度改變而已，終點仍然是寬度的一半，為（100，200）
通俗的來講就是把canvas和canvas中的斜線看成一個圖片，無論如何拉伸，斜線始終指着底邊終點。
然而如果設置canvas的寬高屬性，就相當於把他的初始值改變了，那么就不會出現上面的問題。