Canvas 简介及适配

-----------最近做了一个项目用到canvas(移动端)之前没怎么用过，再此将canvas一些基本用法以及适配的坑分享出来---------------

1.canvas简介

 <canvas></canvas>是HTML5出现的新标签，像所有的Dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图。

IE9+支持；

2.基本知识：

context:是一个封装了很多绘图功能的对象，获取这个对象的方法是

var context =canvas.getContext("2d");

canvas元素绘制图像的时候有两种方法，分别是

context.fill()//填充

context.stroke()//绘制边框

context.fillStyle//填充的样式

context.strokeStyle//边框样式

context.lineWidth//图形边框宽度

绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)

清除矩形区域 context.clearRect(x,y,width,height)

圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

路径 context.beginPath() context.closePath()

绘制线段 context.moveTo(x,y) context.lineTo(x,y)

线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)

线性渐变颜色lg.addColorStop(offset,color)

绘制贝塞尔曲线（贝济埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

绘制图像

绘图：context.drawImage

图像平铺：context.createPattern(image,type)