canvas 的基本用法

一、元素

1、写法：

您的浏览器不支持canvas

2、宽高设置

在使用元素时必须设置宽度和高度，指定可以绘画的区域大小，但是宽高设置有一个注意的问题

样例代码：

在这里我们直接在标签内设置了绘画区域的大小，在浏览器中显示的效果是这样的

图片.png

如果我们用常规CSS设置宽高的话

这时浏览器中显示的效果就是这样

图片.png

明明是宽高一样的矩形，为什么会出现拉长的效果呢？
　　其实有自己默认的宽高300px*150px,而且在行间样式定义width、height跟在style中定义width、height是有所区别的：标签的width和height是在浏览器中被渲染的高度和宽度。如果的width和height没指定或者值不正确，就被设置成默认值{width:300px;height:150px}；
　　这就解释了为什么第二种写法导致图形被拉伸，原因是绘画区域的大小没有在行间样式中定义，所以被默认为宽高的默认值，而