走进 canvas 的世界

canvas能做些什么？

游戏 ：游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧，运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥更大的潜力。
图表制作 ：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作，其实大家完全可以用Canvas来实现。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。
banner广告 ：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。

字体设计 ：对于字体的自定义渲染将完全可以基于Web，使用HTML5技术进行实现。
图形编辑器 ：图形编辑器未来也许能够100%基于Web实现。
其他可嵌入网站的内容 ：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。可以大家继续挖掘Canvas的潜力，运用HTML5技术创造更多价值。

canvas 的一些应用场景

粒子动画小游戏：http://lab.hakim.se/trail/03/

图表制作：http://echarts.baidu.com/gallery/editor.html?c=area-simple

碎片式轮播图：https://darylxyx.github.io/Demo/fragment/

图片编辑： http://wow.techbrood.com/fiddle/2580

基本用法

要使用 canvas 元素，先设置其 width 和 height 属性。

要在画布上绘图，需要取得绘图上下文，需要调用 getContext（）方法并传入“2d”，就可以取得2D上下文对象。

2D上下文的两种基本绘图操作：填充和描边，取决于两个属性： fillStyle和strokeStyle。

颜色值可以使用 CSS 中指定颜色值的任何格式。

绘制矩形

矩形是唯一一种可以直接在2D上下文绘制的形状。

与矩形有关的方法：fillRect（） , strokeRect（） , clearRect（）。

需指定（y,width,height）进行绘制。

绘制路径

要绘制路径，先调用beginPath（）方法，表示要开始绘制新路径。

调用绘制路径的基本方法：

arc（x, y, radius, startAngle, endAngle, counterclockwise）

moveTo（x, y）

lineTo（x, y）

rect（x, y, width, height）

quadraticCurveTo（cx，xy，x，y）

bezierCurveTo（c1x，c1y，c2x，c2y，x，y）

如果想要绘制一条连接到路径起点的线条，可以调用closePath（）方法。

如果想用fillStyle填充路径，可以调用fill（）方法进行填充。

如果想要用strokeStyle对路径进行描边，可以调用stroke（） 。

beginPath（）方法：开始绘制新路径，为了切断和上一个路径的联系。

closePath（）方法：一定要在绘制之前使用。

绘制文本

绘制文本主要有两个方法：fillText（）和strokeText（） ，接受4个参数（文本，x，y，最大像素宽度），这两个方法都以下列三个属性为基础：

font ：表示文本样式、大小及字体，用CSS中指定字体格式来指定。

textAlign：表示文本对齐方式。

textBaseline：表示文本基线。

变换

rotate（angle）：围绕原点旋转图像angle弧度。

scale（scaleX，scaleY）：缩放图像。

translate（x，y）：将坐标原点移动到（x，y） 。

阴影

2D上下文会根据下列几个属性值，为形状或路径绘制出阴影。

shadowColor：用CSS颜色格式表示的阴影颜色。

shadowOffsetX：x轴方向偏移量

shadowOffsetY：y轴方向偏移量

shadowBlur：模糊像素数

渐变

创建渐变对象，createLinearGradient（）：接收4个参数：起点和终点的x、y坐标值。

创建径向渐变，createRadialGradient（）：接收6个参数：起点圆和终点圆的圆心、半径

指定色标，addColorStop（）：接收2个参数：色标位置（0 ~ 1），色标颜色值

save和restore

无论是执行变换还是fillStyle、strokeStyle等属性，都会在当前上下文中一直有效，除非再对上下文进行修改。如果将来还要返回某组属性和变换的组合，可以调用save（）的方法。save（）方法会将当前所有设置存入一个栈结构。

对上下文进行修改后，如果想要恢复之前的状态时，可以调用restore（）方法，在保存设置的栈结构中向前返回一级，恢复之前的状态。

save（）方法可以连续使用保存更多设置到栈中，restore（）方法连续调用可以一级一级返回之前的设置。

save（）方法保存的只是对绘图上下文的设置和变换，不会保存绘图上下文的内容。

实例DEMO1： Post not found: 基于-canvas-的简易时钟

绘制图像

2D上下文内置了对对象的支持。可以使用drawImage（）方法把图片绘制到画布上

drawImage（）：

   2个参数：img元素，坐标

   5个参数：img元素，坐标，宽高

   9个参数：img元素，源图像坐标，源图像宽高，目标图像坐标，目标图像宽高

使用图像数据

2D上下文可以通过getImageData（）取得原始图像数据。

   getImageData（）：接收4个参数：坐标，宽高度，返回一个实例对象

每一个实例对象都有三个属性：width，height和data

data属性保存着图像中每一个像素的数据。

每一个像素用4 个元素来保存：红、绿、蓝和透明度值。

实例DEMO2： 图像解析粒子
附效果图

图像导出

toDataURL（）：接收参数，图像的MIME类型格式。