canvas基础知识点简介

canvasTOC\o"1-3"\h\u14801基础概念 218532创建canvas 2286563方法属性 259704画一条直线 3170734.1线条的属性 3189945画矩形 331396画五角星 471707图形变换 530358状态保存和恢复 6154239填充样式 6214299.1线性渐变 6230709.2径向渐变 6195739.3使用图片填充 7248129.4使用画布canvas进行填充 71139510线条样式 8319411曲线的绘制 81927711.1arc() 81583411.2arcTo() 91423011.3画月亮 103146811.3.1三角函数 102898511.3.2封装画月亮函数 11604311.4贝塞尔曲线Bezier 122714411.4.1二次贝塞尔曲线 121579911.4.2三次贝塞尔曲线 132014912文字渲染基础 132887012.1font属性 132454712.2textAlign水平对齐 162183412.3textBaseline垂直对齐 16942112.4messureText(string).width文本的度量 163258713阴影 161950014global全局 172717914.1globalAlpha 173001414.2globalCompositeOperation 18307715剪辑区域clip() 18基础概念1. canvas标签 HTML5<canvas>元素用于图形的绘制，通过脚本来完成<canvas>标签只是图形容器，您必须使用脚本来绘制图形你可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像只有标准浏览器支持（IE9以上，谷歌，火狐）canvas不是基于对象的绘制，而是基于状态的绘制创建canvashtml：<canvasid=’canvas’></canvas>JavaScript：varcanvas=document.getElementById(‘vanvas’);canvas.width=500;cnavas.height=500;varcontext=canvas.getContext(‘2d’);方法属性canvas.width=500; //画布的宽度canvas.height=500; //画布的高度canvas.getContext(‘2d’); //创建绘图的上下文环境context.lineWidth=5; //线条粗细context.moveTo(100,100); //起始坐标context.lineTo(200,200); //划到给定的坐标context.fillStyle=’yellow’ //定义填充颜色context.fill(); //开始填充，默认填充黑色context.strokeStyle=’red’; //定义线条颜色context.stroke(); //开始绘制，默认绘制灰色(128,128,128)context.beginPath(); //创建新的状态context.closePath(); //画一条直线context.moveTo(100,100) 状态设置context.lineTo(100,100);context.stroke(); 绘制线条的属性lineWidth：线条粗细lineCap：设置线条端点 butt：平头端点(默认) round：圆头端点 square：方头端点context.lineCap=”square”; //也可以实现图像封闭无缺口（效果等同closePath()）lineJoin:设置线条连接样式 miter：斜接连接（默认） round：圆角连接 bevel：斜角连接miterLimit：默认值为10 当lineJoin为miter时才有效，如果线条相接所产生的内角及外角的距离超过10，将以bevel的方式相连接画矩形context.rect(x,y,width,height); //定义矩形context.fillRect(x,y,width,height); //定义并且绘制图形(填充，不能描边)context.strokeRect(x,y,width,height); //定义并且绘制图形(描边，不能填充)代码：context.rect(100,100,300,300);context.lineWidth=10;context.strokeStyle='red';context.fillStyle='green';context.stroke();context.fill();画五角星正弦：对边除以斜边余弦：邻边除以斜边正切：对边除以邻边在编程里面，用的是弧度制：20度表示为：20/180*Math.PI //角度转弧度第一点的坐标(x,y)表示为：(Math.cos(18/180*Math.PI)*R,-Math.sin(18/180*Math.Pi)*R)循环遍历输出十个点：for(vari=0;i<5;i++){ context.lineTo(Math.cos((18+72*i)/180*Math.PI)*300+400,-Math.sin((18+72*i)/180*Math.PI)*300+400); context.lineTo(Math.cos((54+72*i)/180*Math.PI)*150+400,-Math.sin((54+72*i)/180*Math.PI)*150+400);}封装画五角星得到函数：functiondrawStar(cxt,R,r,x,y){ cxt.beginPath();for(vari=0;i<5;i++){ cxt.lineTo(Math.cos((18+72*i)/180*Math.PI)*R+x,-Math.sin((18+72*i)/180*Math.PI)*R+y); cxt.lineTo(Math.cos((54+72*i)/180*Math.PI)*r+x,-Math.sin((54+72*i)/180*Math.PI)*r+y);} cxt.closePath(); cxt.stroke(); }从软件工程的角度，变化五角星函数：(绘制一个标准的五角星路径)functionstarPath(cxt){ cxt.beginPath();for(vari=0;i<5;i++){ cxt.lineTo(Math.cos((18+72*i)/180*Math.PI),-Math.sin((18+72*i)/180*Math.PI)); cxt.lineTo(Math.cos((54+72*i)/180*Math.PI)*0.5,-Math.sin((54+72*i)/180*Math.PI)*0.5);} cxt.closePath();}functiondrawStar(cxt,x,y,R,rot){ starPath(cxt);}图形变换translate(x,y) 位移rotate(deg) 旋转 //要把角度制变为弧度制，乘上Math.PI/180scale(sx,sy) 缩放transform(a,b,c,d,e,f) 设置变换矩阵setTransform(a,b,c,d,e,f) 忽略掉之前所有的变换矩阵，重新设置新的变换矩阵 a：水平缩放（1） b：水平倾斜（0） c：垂直倾斜（0） d：垂直缩放（1） e：水平位移（0） f：垂直位移（0）状态保存和恢复save() //保存当前图形的状态restore() //恢复所保存的图形的状态填充样式fillStyle线性渐变1. vargrd=context.createLinearGradient(xstart,ystart,xend,yend);2. grd.addColorStop(stop,color);3. context.fillStyle=grd;填充白色到黑色的线性渐变：varlinearGrad=context.createLinearGradient(0,0,800,800);linearGrad.addColorStop(0.0,’white’);linearGrad.addColorStop(1.0,’black’);context.fillStyle=linearGrad;context.fillRect(0,0,800,800);径向渐变1. vargrd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);2. grd.addColorStop(stop,color);3. context.fillStyle=grd;填充白色到黑色的线性渐变：vargrd=context.createRadialGradient(400,400,0,400,400,canvas.height/2);grd.addColorStop(0,'white');grd.addColorStop(1,'black');context.fillStyle=grd;context.fillRect(0,0,800,800);使用图片填充createPattern(img,repeat-style)repeat-style:no-repeat repeat-x repeat-y repeat图片填充实例：varbgImg=newImage();bgImg.src=”pic.jpg”;bgImg.onload=function(){ varpattern=context.createPattern(bgImg,”repeat”); context.fillStyle=pattern; context.fillRect(0,0,800,800);}使用画布canvas进行填充createPattern(canvas,repeat-style)画布填充实例：functioncreateBgCanvas(){varbgCanvas=document.createElement('canvas');bgCanvas.width=100;bgCanvas.height=100;varbgContext=bgCanvas.getContext('2d');vargrd=bgContext.createRadialGradient(50,50,0,50,50,bgCanvas.height/2);grd.addColorStop(0,'white');grd.addColorStop(1,'black');bgContext.fillStyle=grd;bgContext.fillRect(0,0,100,100);returnbgCanvas;}varbgCanvas=createBgCanvas();varpattern=context.createPattern(bgCanvas,'repeat');context.fillStyle=pattern;context.fillRect(0,0,800,800);线条样式strokeStyle填充的样式，同样使用于线条样式曲线的绘制arc()context.arc( centerX,centerY,radius, //圆心的坐标centerX，centerY,圆弧半径radius staringAngle,endingAngle, //开始角度staringAngle，结束角度endingAngle anticlockwise=false //可选，是否逆时针绘制，false表示顺时针绘制)绘制一个圆：context.arc(100,100,100,0*Math.PI,2*Math.PI);context.stroke();绘制一个半圆：context.arc(100,100,100,0*Math.PI,1*Math.PI);context.stroke();封装圆角矩形函数：functiondrawRoundRect(cxt,x,y,width,height,radius){cxt.save();cxt.translate(x,y);pathRoundRect(cxt,width,height,radius);cxt.stroke();cxt.restore();}functionpathRoundRect(cxt,width,height,radius){cxt.beginPath();cxt.arc(radius+width,radius+height,radius,0*Math.PI,0.5*Math.PI);cxt.lineTo(radius,height+2*radius);cxt.arc(radius,radius+height,radius,0.5*Math.PI,1*Math.PI);cxt.lineTo(0,radius);cxt.arc(radius,radius,radius,1*Math.PI,1.5*Math.PI);cxt.lineTo(radius+width,0);cxt.arc(radius+width,radius,radius,1.5*Math.PI,2*Math.PI);cxt.closePath();}drawRoundRect(context,50,50,100,200,50); arcTo()context.arcTo(x1,y1,x2,y2,radius);x0,y0,x1,y1,x2,y2只是形成两条线段，圆弧的切点不一定要在这两条线段上上图的代码：//红线context.beginPath();context.moveTo(100,100);context.arcTo(400,100,400,400,100);context.strokeStyle='red';context.lineWidth=5;context.stroke();//辅助线context.beginPath();context.moveTo(100,100);context.lineTo(400,100);context.lineTo(400,400);context.strokeStyle='black';context.lineWidth=1;context.stroke();画月亮三角函数反三角函数：反正弦arcsinx，反余弦arccosx，反正切arctanx，反余切arccotx，反正割arcsecx,反余割arccscx反三角函数算出来的是弧度。三角函数表示直角边的比值。角度转弧度：Math.PI/180*角度弧度转角度：180/Math.PI*弧度在直角三角形中，30度角对应的边是斜边的一半：sin30°=1/2；在js里，返回30度角Math.asin(1/2)*(180/Math.PI);封装画月亮函数arc()+arc()functiondrawMoon(cxt,x,y,R,r,rot){cxt.translate(x,y);cxt.rotate(rot*Math.PI/180);vari=(R*R-r*r)/(2*r);cxt.arc(0,0,R,0.5*Math.PI,1.5*Math.PI,true);cxt.stroke();cxt.beginPath();cxt.arc(0-i,0,i+r,Math.atan(R/i),-Math.atan(R/i),true);cxt.stroke();}drawMoon(context,200,300,100,50,30);arc()+arcTo()drawMoon(上下文环境，圆心坐标x，圆心坐标y，圆弧半径，自定义点的坐标x，旋转角度)functiondrawMoon(cxt,x,y,R,dot,rot){cxt.save();varr=Math.sqrt(R*R+dot*dot)*R/dot;cxt.translate(x,y);cxt.rotate(rot*Math.PI/180);cxt.arc(0,0,R,0.5*Math.PI,1.5*Math.PI,true);cxt.moveTo(0,0-R);cxt.arcTo(dot,0,0,R,r);cxt.restore();}drawMoon(context,200,300,100,200,30);context.stroke();context.fill();贝塞尔曲线Bezier二次贝塞尔曲线quadraticCurveTo()context.moveTo(x0,y0); //起始点坐标context.quadraticCurveTo(x1,y1,x2,y2); //控制点坐标、结束点坐标三次贝塞尔曲线bezierCurveTo()context.moveTo(x0,y0); //起始点坐标context.bezierCurveTo(x1,y1,x2,y2,x3,y3); //控制点坐标、控制点坐标、结束点坐标文字渲染基础context.font=’bold40pxArial’; //设置字体样式context.fillText(string,x,y,[maxlen]); //给string填充颜色，maxlen（可选）：设置最长值context.strokeText(string,x,y,[maxlen]); //给string描边font属性默认值：”20pxsans-serif”context.font=”font-stylefont-variantfont-weightfont-sizefont-family”font-style:normal (default)italic (斜体字)oblique (倾斜字体)font-variant:nomal (default)small-caps (小型大写字母)font-weight:lighternormal (default)boldbolder 100,200,300,400(nromal),500,600,700(bold),800,900font-size:20px (default)2em150%xx-small、x-small、medium、large、x-large、xx-largefont-family:web安全字体serif(衬线字体)sans-serif(无衬线字体)monospace(等宽字体)textAlign水平对齐context.textAlign=left/center/right //相对于经过x坐标的y轴的平行线textBaseline垂直对齐context.textBaseline=top/middle/bottom //相对于经过y坐标的x轴的平行线messureText(string).width文本的度量context.measureText(string).widthmeasureText()函数传入一个字符串，然后返回一个对象，这个对象拥有一个width属性，这个width属性存有传入的字符串在canvas上渲染的时候渲染出的字符串的宽度阴影context.shadowColor //阴影颜色context.shadowOffsetX //阴影在x轴上的位移context.shadowOffsetY //阴影在y轴上的位移context.shadowBlur //阴影的模糊程度给矩形加上阴影：context.fillStyle='green';context.shadowColor='gray';context.shadowOffsetX=20;context.shadowOffsetY=20;context.shadowBlur=50;context.fillRect(100,100,300,200);给文字加上阴影：varstr='canvas';context.font='bold80px微软雅黑';context.shadowColor='gray';context.shadowOffsetX=5;context.shadowOffsetY=5;context.shadowBlur=5;context.fillStyle='blue';context.fillText(str,50,300);global全局globalAlpha告诉整个绘制系统，我们即将绘制的所有的图形，都将使用指定的alpha值来设置透明度。context.globalAlpha=1; (Default)globalAlpha小案例：context.globalAlpha=0.7;for(vari=0;i<100;i++){varR=Math.floor(Math.random()*255);varG