canvas基础知识点介绍

1、canvasi基础概念i2创建 canvas 23方法属性24画一条直线24.1 线条的属性35画矩形36画五角星47图形变换58状态保存和恢复59填充样式59.1 线性渐变69.2 径向渐变69.3 使用图片填充69.4 使用画布canvas 进行填充 710线条样式711曲线的绘制711.1 arc() 711.2 arcTo()811.3 画月亮1011.3.1 三角函数 1011.3.2 封装画月亮函数 1011.4 贝塞尔曲线 Bezier 1211.4.1 二次贝塞尔曲线 1211.4.2 三次贝塞尔曲线 1212文字渲染基础1312.1 font 属性1312.2 textAli

2、gn水平对齐1512.3 textBaseline垂直对齐1512.4 messureText(string).width文本的度量1513阴影1614global全局 1614.1 globalAlpha 1614.2 globalCompositeOperation 1715剪辑区域clip() 171基础概念1 . canvas 标签HTML5<canvas>元素用于图形的绘制，通过脚本来完成<canvas>标签只是图形容器，您必须使用脚本来绘制图形你可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像只有标准浏览器支持(IE9以上，谷歌，火狐)ca

3、nvas不是基于对象的绘制，而是基于状态的绘制2 仓惟 canvashtml :<canvas id= ' canvas ' ></canvas>JavaScript ：var canvas=document.getElementById(' vanvas ');canvas.width=500;cnavas.height=500;var context=canvas.getContext('2d');3方法属性canvas.width =500;canvas.height =500;canvas.getContext(

4、' 2d')/画布的宽度/画布的高度/创建绘图的上下文环境线条粗细起始坐标/划到给定的坐标/定义填充颜色/开始填充，默认填充黑色/定义线条颜色/开始绘制，默认绘制灰色 (128,128,128)/创建新的状态/绘制context.lineWidth =5;/context . moveTo(100,100);/context.lineTo (200,200); context . fillStyle =' yellow context.fill(); context.strokeStyle =' red context.stroke(); context.beg

5、inPath(); context.closePath();4画一条直线context.moveTo(100,100)状态设置context.lineTo(100,100);context.stroke();lineWidth :线条粗细lineCap :设置线条端点.butt :平头端点（默认）round :圆头端点square :方头端点context.lineCap= " square " ；/也可以实现图像封闭无缺口（效果等同closePath（） ） lineJoin :设置线条连接样式miter :斜接连接（默认）round :圆角连接bevel :斜角连接mi

6、terLimit :默认值为 10方式相连接当lineJoin 为miter时才有效，如果线条相接所产生的内角与外角的距离超过10 ,将以bevelmiterLimit5画矩形/定义矩形/定义并且绘制图形（填充，不能描边）/定义并且绘制图形（描边，不能填充）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.stroke

7、Style='red'context.fillStyle='green'context.stroke();context.fill();(426cieg)(l3Bdeg)6画五角星x: cos(90deg) * Ry:x: co5(S4deX)* r¥： sin(54d命'L f 18 deg- - /cos(lSdeg) * Rv: -sin(18deg) * R正弦：对边除以斜边余弦：邻边除以斜边 正切：对边除以邻边在编程里面，用的是 弧度制： 20度表示为：20/180*Math.PI/ 角度转弧度第一点的坐标(x , y )表示为：(M

8、ath.cos(18/180*Math.PI)*R，-Math.sin(18/180*Math.Pi)*R )循环遍历输出十个点：for( var i=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); 封装画五角星得到函数：function

9、 drawStar(cxt,R,r,x,y)cxt.beginPath();for( var i=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();从软件工程的角度，变化五角星函数：(绘制一个标准的五角星路径)function st

10、arPath(cxt)cxt.beginPath();for( var i=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();)function drawStar(cxt,x,y,R,rot)starPath(cxt);)7图形变换位移旋转/要把角度制变为弧度制，乘上 Ma

11、th.PI/180缩放设置变换矩阵忽略掉之前所有的变换矩阵，重新设置新的变换矩阵translate(x,y) rotate(deg) scale(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)8状态保存和恢复save()/保存当前图形的状态restore()/恢复所保存的图形的状态9填充样式fillStyle9.1 线性渐变1. var grd=context.createLinearGradient(xstart,

12、ystart,xend,yend);2. grd. addColorStop(stop,color);3. context.fillStyle=grd;填充白色到黑色的线性渐变：var linearGrad=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);9

13、.2 径向渐变1. var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);2. grd. addColorStop(stop,color);3. context.fillStyle=grd;填充白色到黑色的线性渐变：var grd=context.createRadialGradient(400,400,0,400,400,canvas.height/2);grd.addColorStop(0,'white');grd.addColorStop(1,'black');context.fillStyle=g

14、rd;context.fillRect(0,0,800,800);9.3 使用图片填充createPattern(img,repeat-style)repeat-style:no-repeatrepeat-xrepeat-y repeat图片填充实例：var bgImg=new Image();bgImg.src= pic.jpg ；bgImg.onload=function()var pattern=context. createPattern (bgImg, “ repeat ");context.fillStyle=pattern;context.fillRect(0,0,80

15、0,800);9.4 使用画布canvas进行填充createPattern(canvas,repeat-style)画布填充实例：function createBgCanvas()var bgCanvas=document.createElement('canvas');bgCanvas.width=100;bgCanvas.height=100;var bgContext=bgCanvas.getContext('2d');var grd=bgContext.createRadialGradient(50,50,0,50,50,bgCanvas.height

16、/2);grd.addColorStop(0,'white');grd.addColorStop(1,'black');bgContext.fillStyle=grd;bgContext.fillRect(0,0,100,100);return bgCanvas;var bgCanvas=createBgCanvas();var pattern=context.createPattern(bgCanvas, 'repeat');context.fillStyle=pattern;context.fillRect(0,0,800,800);10线条

17、样式strokeStyle填充的样式，同样使用于线条样式11曲线的绘制11.1arc()context.arc (centerX,centerY,radius, staringAngle,endingAngle, anticlockwise=false/圆心的坐标centerX , centerY, 圆弧半径radius / 开始角度 staringAngle ,结束角度 endingAngle /可选，是否逆时针绘制 ，false 表示顺时针绘制1.5 pi绘制一个圆：context.arc(100,100,100,0*Math.PI,2*Math.PI);context.stroke();

18、绘制一个半圆：context.arc(100,100,100,0*Math.PI,1*Math.PI);context.stroke();封装圆角矩形函数：function drawRoundRect(cxt,x,y,width,height,radius)cxt.save();cxt.translate(x,y);pathRoundRect(cxt,width,height,radius);cxt.stroke();cxt.restore();function pathRoundRect(cxt,width,height,radius)cxt.beginPath();cxt.arc(radi

19、us+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

20、.PI);cxt.closePath();drawRoundRect(context,50,50,100,200,50);11.2 arcTo()context.arcTo(x1,y1,x2,y2,radius);x0,y0,x1,y1,x2,y2只是形成两条线段，圆弧的切点不一定要在这两条线段上Mm1x2.,d上图的代码：/红线context.beginPath();context.moveTo(100,100);context.arcTo(400,100,400,400,100);context.strokeStyle='red'context.lineWidth=5;co

21、ntext.stroke();/辅助线context.beginPath();context.moveTo(100,100);context.lineTo(400,100);context.lineTo(400,400);context.strokeStyle='black'context.lineWidth=1;context.stroke();11.3画月亮11.3.1 三角函数基本函数英文缩写表达式语言描述正茏曲数sirtesin占比K的对边比斜边余弦函数cosinecosb/cd的邻边比斜边斜物/正切函数langemtana/b4的对边比邻边/的对动口余切函数cotan

22、gentcotb第上4的邻边比对边，才的懦边8L正割函数secamsec的上4的斜边比邻边余割函数cosecamCSCc/a丁白的斜边比对边反三角函数：反正弦 arcsin x , 反余弦 arccos x , 反正切 arctan x , 反余切 arccot x , 反正害U arcsec x,反余害U arccsc x反三角函数算出来的是弧度。 三角函数表示直角边的比值。角度转弧度 ：Math.PI/180*角度弧度转角度 ：180/Math.PI*弧度在直角三角形中，30度角对应的边是斜边的一半: sin30 ° =1/2;在js里，返回30度角Math.asin(1/2)*

23、(180/Math.PI);11.3.2封装画月亮函数arc()+arc()function drawMoon(cxt,x,y,R,r,rot)cxt.translate(x,y);cxt.rotate(rot*Math.PI/180);var i=(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,

24、200,300,100,50,30);arc()+arcTo()(400JOO)(4Q0f400)(1200,400)(400,700)drawMoon(上下文环境，圆心坐标 x,圆心坐标y,圆弧半径，自定义点的坐标 x ,旋转角度) function drawMoon(cxt,x,y,R,dot,rot)cxt.save();var r=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.moveT

25、o(0,0-R);cxt.arcTo(dot,0,0,R,r);cxt.restore();drawMoon(context,200,300,100,200,30);context.stroke();context.fill();11.4贝塞尔曲线Bezier11.4.1 二次贝塞尔曲线/起始点坐标/控制点坐标、结束点坐标quadraticCurveTo()context.quadraticCurveTo(x1,y1,x2,y2);context.moveTo(x0,y0);11.4.2 三次贝塞尔曲线bezierCurveTo()/控制点坐标、控制点坐标、结束点坐标context.moveT

26、o(x0,y0);/ 起始点坐标context.bezierCurveTo(x1,y1,x2,y2,x3,y3);12文字渲染基础/设置字体样式/给string填充颜色，maxlen （可选）：设置最长值/给string 描边context.font= ' bold 40px Arial context.fillText(string,x,y,maxlen); context.strokeText(string,x,y,maxlen);12.1 font 属性默认值："20px sans - serif ”context.font= " font -style fo

27、nt-variant font-weight font-size font-family1. font-style:normal (default) italic(斜体字)oblique(倾斜字体)2. font-variant:nomal(default)small-caps (小型大写字母)3. font-weight:lighter normal (default) bold bolder100,200,300,400(nromal),500,600,700(bold),800,9004. font-size:20px(default)2em 150% xx-small 、x-small

28、 、medium、large 、x-large 、xx-large5. font-family: web安全字体 a) serif(衬线字体)Georgia, sent,Palatine Linotype'',"Book AntiquaPaiatino. serif"Times New Roman ', Times; serifThis is a headingThis is a paragraphThis is a headingTItis is a par哼窗曲This is a headingTim a paragraphb） sans-ser

29、if（ 无衬线字体）字体文本示例Anal. Helvetica, sans-serifArial 日解。h. Gadget, sans-serifCorrie Sans I.1S' cursive, sans-senfImpact CfiarcoaL sans-serifLucida Sans Unicode 'Lucida Grande sans-serifTahoma Geneva, sans-serifTrebuchet LIS Helvetica, sans-serifVerdana, Sene/a, sans-serjfThis is a headingThis is

30、 a paragraphThis is a headingThis is a paragraphThis is a headingThis 冶 a porcrophThis is a headingThisisaDaragraDliThis is a headingThis is a paragraphThis is a headingThis is a paragraphThis is a headingThis is a paragraphThis is a headingThis is a pdmg3Dhc） monospace（等宽字体）Couner New Courier, mono

31、spaceThis is a headingThis lb a paragraph' Lucida Console". Monaco, monospaceThis is a headingTh-is is a paragraph12.2 textAlign水平对齐context.textAlign=left/center/right/相对于经过x坐标的y轴的平行线text A1igntextAligncciilcrlefttextAlign - right12.3 textBaseline垂直对齐context.textBaseline=top/middle/bottom/相

32、对于经过y坐标的x轴的平行线欢迎大家学习(Canvas)绘图接口详解!欢迎大家学习Cunvus绘图接口详解+ 欢迎大家学习Canvas绘图接口详解!12.4 messureText(string).width文本的度量context.measureText(string).widthmeasureText() 函数传入一个字符串，然后返回一个对象，这个对象拥有一个 width属性，这个width属性存有传入 的字符串在canvas上渲染的时候渲染出的字符串的宽度13阴影context.shadowColor context.shadowOffsetX context.shadowOffsetY

33、 context.shadowBlur/阴影颜色/阴影在x轴上的位移/阴影在y轴上的位移/阴影的模糊程度给矩形加上阴影：context.fillStyle='green'context.shadowColor='gray'context.shadowOffsetX=20;context.shadowOffsetY=20;context.shadowBlur=50;context.fillRect(100,100,300,200);给文字加上阴影：var str='canvas'context.font='bold 80Px微软雅黑cont

34、ext.shadowColor='gray'context.shadowOffsetX=5;context.shadowOffsetY=5;context.shadowBlur=5;context.fillStyle='blue'context.fillText(str,50,300);14 global 全局14.1 globalAlpha告诉整个绘制系统，我们即将绘制的所有的图形，都将使用指定的alpha值来设置透明度。context.globalAlpha=1;(Default)globalAlpha小案例：context.globalAlpha=0.7;for(var i=0; i<100; i+)v