HTML5-canvas全解析

HTML5CanvasI.Canvas基础II.设置Canvas绘图样式III.canvas绘制图形IV.Canvas引用图像V.Canvas的画布处理VI.Canvas的图形组合VII.Canvas绘制文字VIII.Canvas其他知识•保存与恢复•保存文件•获取像素信息•基本动画Canvas基础Canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。Canvas的绘制需要通过JS编写在其中进行绘画的脚本。Canvas元素的基础知识canvas看起来很像img，唯一不同就是它不含src和alt属性。它只有两个属性，width和height，两个都是可选的，并且都可以DOM或者CSS来设置。如果不指定width和height，默认的是宽300像素，高150像素。虽然可以通过CSS来调整canvas的大小，但渲染图像会缩放来适应布局的。结束标签/canvas是必须的放置Canvasstyletype=text/css.canvas{width:150px;height:150px;}canvas{border:1pxsolidblack;}/stylebodyonload=draw();divclass=canvascanvasid=canvaswidth=150height=150p写在这里面的内容将展示给不兼容canvas的浏览器/p/canvas/div/body演示（canvas基础测试模板2.html）模板JS以下js是测试用的html文档中通用的，但是并不指必须如此scripttype=text/javascriptfunctiondraw(){canvas=document.getElementById(canvas);if(canvas.getContext){//检测浏览器是否兼容ctx=canvas.getContext(2d);//你的canvas代码在这里}//不兼容的代码}/script绘制图形HTMLDOMgetContext()方法定义和用法getContext()方法返回一个用于在画布上绘图的环境。语法Canvas.getContext(contextID)参数参数contextID指定了您想要在画布上绘制的类型。当前唯一的合法值是“2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。提示：在未来，如果canvas标签扩展到支持3D绘图，getContext()方法可能允许传递一个“3d”字符串参数。（即现在不仅能支持“2D”）。返回值一个CanvasRenderingContext2D对象，使用它可以绘制到Canvas元素中。描述返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2维、3维）提供不同的环境。当前，唯一支持的是2d，它返回一个CanvasRenderingContext2D对象，该对象实现了一个画布所使用的大多数方法。返回下一页：设置绘图样式设置绘图样式填充样式fillStyle()颜色值支持半透明具体请看示例描边样式strokeStyle()颜色值支持半透明设定线条样式设定线宽lineWidth()设定图线帽样式lineCap'butt','round','square'线的链接样式lineJoin'round','bevel','miter'绘制渐变绘制线性渐变绘制径向渐变下一页：绘制阴影给图形绘制阴影shadowOffsetX——阴影的横向移动shadowOffsetY——阴影的纵向移动shadowColor——阴影的颜色shadowBlur——阴影的模糊范围ctx.strokeStyle=rgb(200,0,0);ctx.fillStyle=rgb(255,0,0);ctx.shadowOffsetX=3;ctx.shadowOffsetY=3;ctx.shadowColor=rgba(150,0,0,0.2);ctx.shadowBlur=3;ctx.beginPath();ctx.moveTo(75,60);ctx.bezierCurveTo(125,20,125,100,75,115);ctx.bezierCurveTo(25,100,25,20,75,60);ctx.stroke();ctx.fill();示例下一页：绘制线性渐变HTMLDOMcreateLinearGradient()方法定义和用法createLinearGradient()方法创建一条线性颜色渐变。语法createLinearGradient(xStart,yStart,xEnd,yEnd)这个方法创建并返回了一个新的CanvasGradient对象，它在指定的起始点和结束点之间线性地内插颜色值。注意，这个方法并没有为渐变指定任何颜色。使用返回对象的addColorStop()来做到这一点。要使用一个渐变来勾勒线条或填充区域，只需要把CanvasGradient对象赋给strokeStyle属性或fillStyle属性即可。下一页:canvas线性渐变示例canvas线性渐变示例functiondraw(){varcxt=document.getElementById('canvas').getContext('2d');vargrd=cxt.createLinearGradient(1,1,175,50);//(开始坐标x，开始坐标y，结束点X，结束点Y)grd.addColorStop(1,“#0000ff”);//addColorStop(offset,color)/*参数：百分比，颜色值*/grd.addColorStop(0,#00FF00);cxt.fillStyle=grd;cxt.fillRect(1,1,175,50);}示例返回下一页：canvas径向渐变HTMLDOMcreateRadialGradient()方法定义和用法createRadialGradient()方法创建一条放射颜色渐变。语法createLinearGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)返回值表示一个放射性颜色渐变的一个CanvasGradient对象。描述这个方法创建并返回了一个新的CanvasGradient对象，该对象在两个指定圆的圆周之间放射性地插值颜色。注意，这个方法并没有指定任何用来渐变的颜色。使用返回对象的addColorStop()方法做到这一点。要使用一个渐变来勾勒线条或填充区域，只需要把CanvasGradient对象赋给strokeStyle属性或fillStyle属性即可。放射性渐变的绘制方法使用第一个圆的圆周在偏移0处的颜色和第二个圆的圆周在偏移1处的颜色，在两个位置之间的圆上插入颜色值（红色、绿色、蓝色和alpha）。下一页：canvas径向渐变示例canvas径向渐变示例varradgrad=ctx.createRadialGradient(75,75,1,75,75,60);!--(圆一圆心x，圆一圆心y，圆一半径，圆2圆心x，圆2圆心y，圆2半径，)--radgrad.addColorStop(0,'#A7D30C');radgrad.addColorStop(0.9,'#019F62');radgrad.addColorStop(1,'rgba(1,159,98,0)');ctx.fillStyle=radgrad;ctx.fillRect(0,0,150,150);下一页：canvas绘制图形通过JS在画布上绘制图形使用路径beginPath()stopPath()moveTo()lineTo()绘制矩形Rect()fillRect()strokeRect()clearRect()绘制圆形arc()绘制贝塞尔曲线quadraticCurveTo()bezierCurveTo()Fill()strock()使用图像开始与闭合路径beginPath()该方法不使用参数。通过调用该方法，开始路径的创建。在几次循环地创建路径的过程中，每次开始创建时都要调用beginPath函数closePath()如果当前子路径是打开的，就关闭它。路径创建完成后，使用图形上下文对图像的closePath方法将路径关闭。将路径关闭后，路径的创建工作就完成了，但是注意，这时只是路径创建完毕而已，还没有真正的绘制任何图形。*注：beginPath和closePath方法有时候即使不用也可以进行填充和描边，但是如果不使用那么在最后填充的时候将把所有路径当做一个路径进行填充。示例返回下一页：HTMLDOMmoveTo()方法HTMLDOMmoveTo()方法定义和用法moveTo()方法可把窗口的左上角移动到一个指定的坐标。语法window.moveTo(x,y)参数描述x窗口新位置的x坐标y窗口新位置的y坐标*注：moveTo其实就相当于我们画图时提起画笔到画布的另一个地方，在这个过程中我们并没有进行绘制路径。具体用的时候像：开始在哪画、画完一笔之后再到哪里去画之类的用法。下一页：HTMLDOMlineTo()方法HTMLDOMlineTo()方法定义和用法lineTo()方法为当前子路径添加一条直线。语法lineTo(x,y)参数描述x,y直线的终点的坐标。描述lineTo()方法为当前子路径添加一条直线。这条直线从当前点开始，到(x,y)结束。当方法返回时，当前点是(x,y)。ctx.beginPath();ctx.moveTo(1,1);ctx.arc(50,50,30,0,Mat.PI*2,true);ctx.lineTo(150,150);ctx.closePath();ctx.stroke();/*这个例子中我们发现当用了moveTo之后如果再用arc那么moveTo的点会自动连接到圆的起点而lineTo则从圆的终点开始，颠倒顺序后，lineTo的终点又会自动连接到圆的起点*/*对照moveTo,lineTo就相当于在刚刚提笔到的地方开始画一条线，这条线的结束点就是（x，y），另外就是直线画到这里，当前画笔的位置就到了（x，y）这个点。后面的画矩形就不是了。示例返回下一页：HTMLDOMrect()方法HTMLDOMrect()方法定义和用法rect()方法为当前路径添加一条矩形子路径。语法quadraticCurveTo(x,y,width,height)参数描述x,y矩形的左上角的坐标。width,height矩形的大小。描述rect()方法为路径添加了一个矩形。这个矩形是路径的一个子路径并且没有和路径中的任何其他子路径相连。*当rect()方法返回时，当前位置是(0,0)。注：这时候不可以直接使用lineTo方法画路径，必须先moveTo之后才行。示例返回下一页：HTMLDOMarc()方法HTMLDOMarc()方法定义和用法arc()方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。语法arc(x,y,radius,startAngle,endAngle,counterclockwise)参数描述x,y描述弧的圆形的圆心的坐标。radius描述弧的圆形的半径。startAngle,endAngle沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。沿着X轴正半轴的三点钟方向的角度为0，角度沿着逆时针方向而增加。counterclockwise弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。描述这个方法的头5个参数指定了圆周的一个起始点和结束点。调用这个方法会在当前点和当前子路径的起始点