1.画布基本知识
基础画图：cxt.fillRect画出一个矩形
<body onload="pageLoad();">
<canvas id="cnvMain" width="280px" height="190px"></canvas>
</body>
js:
function pageLoad(){
var cnv=document.getElementById("cnvMain");
var cxt=cnv.getContext("2d");
cxt.fillStyle="#ccc";
cxt.fillRect(30,30,80,80);
}
以上代码实现在页面加载之后画出一个80*80的正方形；fillStyle实现画出内容的背景颜色；
2.绘制带边框的矩形
//设置边框
cxt.strokeStyle="#666";
cxt.strokeRect(30,30,150,80);
//清空图形
cxt.clearRect(36,36,138,68);
3.绘制渐变图形
直接上代码，具体用法代码中有注释：
运行结果展示：
4.在画布中使用路径
4.1 画直线 moveTo和lineTo结合使用
cxt.moveTo(x,y); 找到起始点
cxt.lineTo(x,y); 从起始点开始画一条直接到结束点
以上代码从（130,30）开始到（30,100）画一条向下的斜线，再从（30,100）到（130,160）画一条向上的斜线，效果如下：
4.2 使用arc方法绘制圆形
cxt.arc(x,y,radius,startAngle,endAngle,anticlockwise);
x,y:表示绘制的起始横纵坐标
radius：绘制圆形的半径
startAngle，endAngle：绘制圆形的开始和结束的角度，对用来话圆弧很方便；
anticlockwise：绘制方向，true：顺时针；false：逆时针绘制
案例1：一个实体圆形
结果：
案例2：一个边框圆形
结果：
案例3：衔接圆形
结果：
4.3绘制渐变圆形
cxt.createRadialGradient(30,30,0,20,20,400);
参数1和参数2，参数3：开始圆的圆心横纵坐标以及半径
参数4和参数5，参数6：结束圆的横纵坐标和半径
结果：
5.对画布中图形的操作
图形的移动，旋转，缩放分别对应方法：translate(),rotate(),scale(),
translate(x,y):x表示图形在横坐标上移动距离，大于0向右移动，小于0向左；
y表示图形在纵坐标上移动距离，大于0向上，小于0向左；
rotate(angle):angle表示旋转角度，大于0顺时针，小于0逆时针;
scale(x,y):x表示图形在横坐标上缩放倍数，大于0放大，小于0缩小；
y表示图形在纵坐标上缩放倍数，大于0放大，小于0缩小；
实例代码：
实例效果图：
6.组合多个图形
可以根据自己的要求将图形交叉之后覆盖或者显示。通过修改上下文环境中的globalCompositeOperation属性值来实现。source表示新图形资源，destionation表示原图形资源；
实例代码：
结果：
7.添加图形隐形
设置参数：
直接上代码：
实例预览图：
8.处理画布中的图像
使用drawImage方法进行绘制画布中的图像；
（1）cxt.drawImage(image,dx,dy);
image:表示页面中的图像；,dx,dy表示图像左上角的横纵坐标
（2）cxt.drawImage(image,dx,dy,dw,dh);
image:表示页面中的图像；,dx,dy表示图像左上角的横纵坐标; dw,dh表示图像缩放至画布中的宽高；
（3）cxt.drawImage(image，sx,sy,sw,sh,dx,dy,dw,dh);
image,dx,dy, dw,dh使用如上；sx,sy,sw,sh表示需要剪裁的范围；
实例代码：
9.平铺图象
调用createPattern()方法关联图像。
实例代码：
实例结果：
10.切割图象
调用clip()方法切割画布中绘制的图像
实例代码：
实例效果图：
11.处理像素
可是实现对图形进行滤镜效果，比较蒙版或者黑白。调用2个方法：1.getImageData()获取像素；2.putImageData()用于将处理后的像素重新绘制到图像中;
实例代码：
以上代码在谷歌中会出现如下问题：Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
这是跨域的问题，在实际开发中图片由服务器返回就不会报错。
12.画布的其他应用
12.1 绘制文字
使用filleText()和StrokeText()进行文字的绘制；
实例代码：
结果页面：
12.2 保存和恢复输出图形
保存已绘制图形：cxt.save();
还原保存的图形：cxt.restore();
保存的图形输出到浏览器:cxt.toDataURL(imgType);
实例代码：
实例结果：
操作说明:
点击画布第一次：出现第一个图形点击保存按钮，将该图形保存；
点击画布第二次：出现第二个图形点击恢复按钮，将第一步保存的图形恢复到栈中；
点击画布第三次：出现第三个图形，页面会从将第二步恢复的图形填充到第三步绘制的图形中
12.3 制作简单的动画
步骤1：自定义一个函数，用户图形的移动或者旋转
步骤2：使用setInterval()方法设置动画执行的间隔时间，贩毒执行该动画
实例代码：
效果图：
