canvas学习(一)

一、什么是canvas

一直以来，web上的动画都是flash实现的，例如，广告、游戏等。

flash是有缺点的，例如我们需要安装Adobe flash player插件，并且漏洞多、重量比较大、卡顿、不流畅等。

因此，HTML5推出了新的画布标签—canvas。

canvas是一个轻量级的画布，我们使用canvas进行JavaScript编程，不需要增加额外的插件，性能也很好，不卡顿，在手机中也很流畅。

canvas彻底颠覆了flash的主导地位。无论是广告、游戏，都可以用canvas实现。

canvas的本质：利用代码在浏览器上进行画画。

二、canvas的基本使用

id:作为唯一的标识
width:画布内容宽度的像素大小（与style的宽度和高度是有区别）
height:画布内容高度的像素大小
cavas仅仅只是1个画布标签，要绘制内容，必须用js绘制

颜色、样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式。
strokeStyle	设置或返回用于笔触的颜色、渐变或模式。
shadowColor	设置或返回用于阴影的颜色。
shadowBlur	设置或返回用于阴影的模糊级别。
shadowOffsetX	设置或返回阴影与形状的水平距离。
shadowOffsetY	设置或返回阴影与形状的垂直距离。