首先HTML5中新增畫布標籤<canvas></canvas>，所以有些老版本的瀏覽器是不支援的

使用canvas標籤需要知道以下幾點：

1.需要在HTML文件中指明canvas標籤，在canvas標籤中需要寫一些提示資訊

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

　　您的瀏覽器不支援Canvas

</canvas>

2.canvas元素預設大小是300px*150px，我們設定寬高的時候，需要使用canvas標籤中的width和height屬性，而不是css中的width和height屬性

正確設定寬高寫法是：

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

　　您的瀏覽器不支援Canvas

</canvas>

錯誤設定寬高寫法是：

<canvas id="canvas" style="width: 500px;height: 500px;">

　　您的瀏覽器不支援Canvas

</canvas>

這裡在行內樣式和內聯樣式中設定canvas的width和height都是錯誤的，

這樣做會讓canvas的寬高被拉伸或縮小，從而使得繪製的圖形並不跟預想的一樣。

如果這樣說的不透徹的話，也可以這樣理解：

比如我們在生活中要挑選一塊畫布用來畫畫，當我們去市集上挑選畫布的時候，發現畫布的尺寸大小有各種各樣的，但是我們的畫板大小是500*500的，所以我們需要挑選一塊500*500的畫布，在這裡我們需要使用第一種寫法：

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

　　您的瀏覽器不支援Canvas

</canvas>

來挑選正確的合乎畫板尺寸的畫布，因為這種寫法正好是為了我們挑選畫布的尺寸而設計的。

買回來畫布後，我們需要繪製更大更寬的畫，所以我們把原來的畫板尺寸增加了，但是我們又不想麻煩再跑市集一趟去挑選畫布，這裡假設我們之前買的畫布是有彈性的，可以被拉伸並且可以正常使用。

這種情況下就可以使用css中的width和height屬性設定畫布的寬和高（行內樣式和內聯樣式）來拉伸畫布的大小，但是這裡需要注意一點的是：我們是在畫布預設尺寸大小300*150的基礎上面拉伸的。但是經過拉伸後的畫布在繪製圖畫的時候會跟預想的結果不太一樣。

這裡列舉的例子是為了我們更好的理解這兩種情況，至於為什麼，瀏覽器或者HTML5特此為這兩種需求而設定的兩種不同的操作寬高的方法，我們記住可以了