首先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特此為這兩種需求而設置的兩種不同的操作寬高的方法，我們記住可以了