1、canvas和其他标签一样使用，但是IE8以下是不支持的，可以在canvas里面加一个span用来提示，例如：
另外画布的大小，需要直接在内联样式里面设置，而不要在外部样式表里面设置，在外部样式表里设置宽高后，canvas里面的元素也会同比缩放，例如：
2.画方形
oC.fillRect(x,y,w,h); 4个参数依次为x坐标，y坐标，宽，高。同理边框矩形也是oC.strokeRect(x,y,w,h);
绘图之前可以设置绘图样式：
oGC.fillStyle = 'red';
oGC.strokeStyle = 'blue'; oGC.lineWidth = 10; oGC.lineJoin = 'bevel';//控制线的边角 miter(默认) round(圆角) bevel(斜角)3、绘制路径
设置路径的相关方法beginPath() closePath() moveTo() lineTo()
设置好路径后，通过oGc.storke()或者oGc.fill()来绘制
同理也可以在绘制前设置样式，直线还有一个特殊的样式，端点样式oGc.lineCap = 'round' 用的不多
还有两个方法，用来将设置样式值针对某一块代码的oGc.save() oGc.restore().
示例代码：
oGC.save(); oGC.fillStyle = 'red'; oGC.beginPath(); oGC.moveTo(100,100); oGC.lineTo(200,200); oGC.lineTo(300,200); oGC.closePath(); oGC.fill(); oGC.restore(); oGC.beginPath(); oGC.moveTo(100,200); oGC.lineTo(200,300); oGC.lineTo(300,300); oGC.closePath(); oGC.fill();
4、绘制弧形路径
相关方法：oGC.arc(200,200,150,0,90*Math.PI/180,true);参数一次是圆心坐标，半径，起始弧度，结束弧度，是否逆时针方向。
几个绘制其他弧形的方法：
oGC.arcTo(100,100,200,100,100); oGC.quadraticCurveTo(100,100,200,100); oGC.bezierCurveTo(100,100,200,200,200,100); 和贝塞尔曲线相关，用的不多。
5.变换
变换也是有三种translate，scale，rotate
6.插入图片
drawImage(obj,x,y,w,h); 五个参数依次是图片对象，x,y坐标，宽高。由于图片得提前加载好，所以可以利用图片预加载，当图片加载好了之后，在执行往canvas里面插入图片。
7.设置背景
createPattern(obj,'repeat'); 两个参数依次是图片对象和平铺方式。用法如下：
var bg = oGC.createPattern(obj,'repeat');oGC.fillStyle = bg;oGC.fillRect(0,0,300,300);
8.渐变
线性渐变：createLinearGradient(x1,y1,x2,y2); 4个参数依次是起始点的坐标，结束点的坐标。用法如下：
var obj = oGC.createLinearGradient(150,100,250,200);obj.addColorStop(0,'red');obj.addColorStop(0.5,'yellow');obj.addColorStop(1,'blue');oGC.fillStyle = obj;oGC.fillRect(150,100,100,100);
放射性渐变：createRadialGradient(x1,y1,r1,x2,y2,r2); 参数依次是第一个圆的坐标和半径，第二个圆的坐标和半径。用法如下：
var obj = oGC.createRadialGradient(200,200,100,200,200,150);obj.addColorStop(0,'red');obj.addColorStop(0.5,'yellow');obj.addColorStop(1,'blue');oGC.fillStyle = obj;oGC.fillRect(0,0,oC.width,oC.height);
9.添加文字
fillText('你好',x,y); 参数依次是需要添加的文字，以及坐标 strokeText用法一样。
在添加文字之前，需要设置一些文字的样式。例如：
oGc.font = '60px impact'; oGc.textBaseline = 'top'(上下对齐方式)
还可以通过oGc.measureText(str).width;来获取宽度，高度和文字大小相等。综合用法如下：
oGC.font = '60px impact'; oGC.textBaseline = 'top'; //middle bottom var w = oGC.measureText('hello word').width; oGC.fillText('hello word',(oC.width - w)/2,(oC.height - 60)/2); 10.添加阴影
oGc.shadowOffsetX = 10;//偏移量
oGc.shadowColor = 'red'; //阴影颜色
oGc.shadowBlue = 3 //模糊值
