< canvas id="canvas"
height="300" width="300" >
您的浏览器不支持canvas标签
< / canvas >
canvas标签在页面中只显示一个设定背景色的画布，如果要产生新内容或
者进行画图操作，需要借助canvas API(HTML5的内置对context 对象)和
javascript操作实现画图或者其他图像操作
具体实例：
设置了绘图环境才能对其操作，3d的要用另外的实现。
画线段:
a, cxt.moveTo(20,20);//开始起点
b, cxt.lineTo(100,20);//结束终点
c, cxt.stroke();//正式画
总的就是分为两步：1，设计线段怎么画；2，画
画之前可以设置样式（cxt.lineWidth=5;画笔的粗细，多少px像素；cxt.strokeStyle="yellow";字体颜色fillStyle是填充颜色）
样式是根据最近的一次画笔设置决定的，空心和实心是分开的。
画圆：
cxt.arc(200,200,50,0,360,false);==>(横坐标，纵坐标，半径，圆起度数，圆终度数，顺逆时针做画)；
所有的路径图形，开始时：cxt.beginPath( );
每画完要用封闭路径：cxt.closePath( );
画矩形：(矩形不算路径图形)
cxt.strokeRect(300,150,100,100)；
cxt.fillRect(300,390,100,100);//前面两是起点坐标，后面是长宽。
也可分开画：
cxt.rect(300,270,100,100);
cxt.fill();//但是分开的话，用fill就会把以前都填充了，所以要加cxt.beginPath();cxt.closePath();
写字：
cxt.font="40px 宋体";//css font属性
cxt.fillText("兄弟",20,300);
cxt.strokeText("兄弟",20,350);
画图：//把一幅图片画到画布中
注意webkit内核的浏览器 chrome和猎豹不支持
var img =new Image();
img.src="xiao.jpg";
cxt.drawImage(img,20,370,230,306);
画三角形 ：//填充或者画路径要先关闭路径再画
cxt.beginPath();
//移动至开始点
cxt.moveTo(300,500);
cxt.lineTo(300,600);
cxt.lineTo(400,550);
cxt.closePath();
cxt.stroke()；
旋转图片：
a, 设置旋转环境：cxt.save( );
b, 在异次元空间重置0，0点的位置：cxt.translate(20,20);
c, 图片/形状旋转：cxt.rotate(30*Math.PI/180);//设置旋转角度，参数是弧度（公式：角度*Math.PI/180）；
d, 旋转一个图片：
var img=new Image( );
img.src="xiao.jpg";
cxt.drawimage(img,0,0,230,306);
e, 将旋转后的元素放回原画布： cxt.restore( );
//旋转是新画了一个图，不是原图旋转；角度的+，-是按时针顺逆旋转。（过程不可颠倒）
Canvas的API主要方法：
save()
===>保存当前环境的状态
restore()
===>返回之前保存过的路径状态和属性
createEvent()
getContext()
===>返回一个对象，指出访问绘图功能必要的API
toDataURL()
===>返回canvas图形的URL
Canvas的API颜色、样式和阴影属性和方法：
属性：fillStyle===>设置或返回用于填充绘画的颜色，渐变或模式
strokeStyle===>设置或返回用于笔触的颜色，渐变或模式
shadowColor===>设置或返回用于阴影的颜色
shadowBlur===>设置或返回用于阴影的模糊级别
shadowOffsetX===>设置或返回阴影距形状的水平距离
shadowOffsetY===>设置或返回阴影距形状的垂直距离
方法：
createLineatGradient()===>创建线性渐变（用在画布内容上）
createPattern()===>在指定的方向上重复指定的元素
createRadialGradient()===>创建反射状/环形的渐变（用在画布内容上）
addColorStop===>规定渐变对象中的颜色和停止位置
Canvas的API线条样式属性：
lineCap===>设置或返回线条的结束端点样式
lineJoin===>设置或返回两条线相交时，所创建的拐角类型
lineWidth===>设置或返回当前的线条宽度
miterLimit===>设置或返回最大斜接长度
Canvas的API矩形方法：
rect()===>创建矩形
fillRect()===>绘制“被填充” 的矩形
strokeRect()===>绘制矩形（无填充）
cleatRect()===>在给定的矩形内清除指定的像素
Canvas的API-路径方法:
fill()===>填充当前绘图（路径）
stroke()===>绘制已定义的路径
beginPath===>起始一条路径，或重置当前路径
moveTo===>把路径移动到画布中的指定点，不创建线条
closePath()===>创建从当前点回到起始点的路径
lineTo===>添加一个新点，创建从该点到最后指定点的线条
clip()===>从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()===>创建二次贝塞尔曲线
bezierCurveTo()===>创建三次贝塞尔曲线
arc()===>创建弧/曲线（用于创建圆形或部分圆）
arcTo===>创建两切线之间的弧/曲线
isPointInPath()===>如果指定的点位于当前路径中，返回布尔值
Canvas的API-转换方法：
scale()===>缩放当前绘图至更大或更小
rotate()===>旋转当前绘图
translate()===>重新映射画布上的（0，0）位置
transform()===>替换绘图的当前转换矩阵
setTransform()===>将当前转换重置为单位矩阵。然后运行transform()
Canvas的API-文本属性和方法
属性：font===>设置或返回文本内容的当前字体属性
textAlign===>设置或返回文本内容的当前对齐方式
textBaseline===>设置或返回在绘制文本时使用的当前文本基线
方法：fillText()===>在画布上绘制“被填充的”文本
strokeText()===>在画布上绘制文本(无填充)
measureText()===>返回包含指定文本宽度的对象
Canvas的API-图像绘制方法：
drawImget()===>向画布上绘制图像、画布或视频
chrome不支持
Canvas的API-像素操作方法和属性:
属性：width===>返回ImageData对象的宽度
height===>返回ImageData对象的高度
data===>返回一个对象，其包含指定的ImageData对象的图像数据
方法：createImageData()===>创建新的，空白的ImageData对象
getImageDate()===>返回ImageData对象，该对象为画布上指定的矩形复制像素数据
putImageData()===>把图像数据（从指定的ImageData对像）放回画布上
Canvas的API图像合成属性：
globalAlpha===>设置或返回绘图的当前alpha或透明值
globalCompositeOperation
===>设置或返回新图像如何绘制到已有的图像上
