聊聊HTML5 Canvas 2D

1、什么是Canvas

Canvas,意思就是画布。主要用于图形表示、图表绘制、游戏制作等。运用到web中网页内容会更加丰富，效果更加炫目。主要特征有：
。就像传统的荧幕，可宽、可长，就是不能圆，它是一个矩形。
。canvas需要使用JavaScript在web上绘制各种图形。
。canvas中的每一个像素都可控，即所谓的像素级操作。
。可以拥有多种绘制路径，矩形、圆形、字符以及添加图片等。
。canvas不需要插件，具有跨平台的先天优势，与flash、SVG、VML等不同。
。canvas具有多种操作函数和方法，比SVG和VML简单易懂。
。只要支持HTML5标准的浏览器都可运行canvas。

2、Canvas 2D原理

canvas 2D中绘图并不是直接在canvas标记搜创建的绘图画面上进行绘画操作，而是依赖画面提供的渲染上下文，所有的命令、属性都定义在渲染上下文文档中。每当使用canvas的“getConText（2d）;”方法时，返回canvasRenderingConText2D对象，其内表现为平面坐标，左上角坐标为（0，0）。
而canvas能够成为web绘图标准原因有二；一、由于不用存储画出的每一个元素，所以性能更好：二、与其他语言的二维绘图API类似，canvas更容易实现。

3、Canvas 2D特效

canvas与其它绘图工具一样，也有自己的特效。我们可以做出渐变、阴影、透明、旋转，还有比较复杂的缩放、变形、组合、裁剪、动画和事件感应。
渐变：可以通过 .canvasGradient(x,x,x,x)来实现颜色渐变。
阴影与透明：在学习css3的特效后就简单了，而阴影特效主要有一下几个属性：
。shadowffsetX=float;
。shadowffsetY=float;
。shadowBiur=float;用于设置阴影的模糊度，默认为0。
。shadowfColor=colort;用于设置阴影颜色，默认为全透明黑色。
旋转：需要用到rotate(angle)方法，angle时旋转角度，旋转中心是canvas坐标原点。
例：var degree=0; //初始化
degree++; //角度自加
ctx,rotate(degree*Math.PI/180); //旋转的角度，为为正时时逆时针旋转，为负时顺时针旋转。