1.canvas是什么
<canvas></canvas>是html5出现的新标签,和figure,seccion这些新标签不同的是canvas有自己的api,它可以像所有的dom对象一样,有自己本身的属性、方法和事件,其中比较好的就是绘图的方法,js能够调用它来进行绘图。
2.canvas基本用法
<canvas>标签的基本结构如下:
<canvas id="myCanvas" width="200" height="200">< /canvas> 画布
JavaScript获取画布:
var cvs = document.getElementById("myCanvas"); 标识画布
指明画布上下文,官方规范只承认一个2d环境:
var ctx = cvs.getContext("2d"); 定义画笔
绘图流程:
ctx.beginPath() :开始一个路径 开始绘图
ctx.moveTo(x,y): 路径移到画布中的指定点 , 即起点
ctx.lineWidth:画线的宽度 (写在绘制之前) 绘制线宽
ctx.lineTo(x,y) :添加一个新点,画线 定点,画线
......
ctx.closePath() :关闭绘制路径 结束绘制,起点终点自动直线连接闭合
ctx.fillStyle:用来设置填充颜色 填充样式
ctx.fill() :填充已定义好的路径 进行填充
ctx.strokeStyle:用来设置描边颜色 绘制样式
ctx.stroke() :绘制已定义好的路径 进行绘制
注:
1.IE 6 7 8不支持 <canvas>标签
2.宽高写在内部跟样式有区别的(样式设置-画出的图形宽高改变,内部设置-画出的图形宽高不变)
3.系统默认在绘制第一个路径的开始点为beginPath,如果画完前面的路径没有重新指定beginPath,那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制。记住每次画路径都在前后加context.beginPath()和context.closePath()就行
4.每次调用ctx.fill()的时候会自动把当次绘制的路径的开始点和结束点相连,接着填充封闭的部分.但是ctx.stroke()不会连接。
3.canvas绘图
绘制矩形-----ctx.rect(x,y,w,h) x、y为起始坐标,w、h为矩形的宽、高
支持这样写:ctx.fillRect(x,y,w,h) 及 ctx.strokeRect(x,y,w,h)
绘制圆形-----ctx.arc(x,y,r,sa,ea,true/false) x、y为圆心坐标,r为半径;sa、ea分别为起始角度和结束角度;
true是逆时针画圆,false是顺时针画圆 例:ctx.arc(200,200,100,0,2*Math.PI,true)
贝塞尔曲线----ctx.quadraticCurveTo (cx,cy,ex,ey) 二次贝塞尔曲线,一个控制点,一个结束点
ctx.bezierCurveTo (cx1,cy1,cx2,cy2,ex,ey) 三次贝塞尔曲线,两个控制点,一个结束点
绘制文字----fillText(text,x,y,maxWidth) 填充绘制 text表示文字 x、y为坐标 maxWidth可选,为文字最大宽度,防止文字溢出
strokeText(text,x,y,maxWidth) 描边绘制、镂空字 text表示文字 x、y为坐标 maxWidth可选,同上
其他属性设置--- ctx.font = 'bold 60px 微软雅黑';(顺序不能改)
ctx.textAlign="left"; ctx.textAlign="right";(左右是根据你定的xy坐标来定的-左-最左边在坐标;右-最 右边在坐标 , 一般不需要 )
ctx.textBaseline="middle"; ctx.textBaseline="top"; ctx.textBaseline="bottom"(一般不准确,不用)
4.canvas里面的渐变
线性渐变----var lg= ctx.createLinearGradient(xStart,yStart,xEnd,yEnd); xStart渐变开始x轴坐标,yEnd渐变结束y轴坐标
线性渐变颜色lg.addColorStop(offset,color) offset设定的颜色离渐变结束点的偏移量(0~1) color 绘制颜色
径向渐变----var rg=ctx.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd); xStart发散开始圆心x坐 标,radiusStart发散开始圆的半径,xEnd发散结束圆心x坐标,radiusEnd发散结束圆的半径 。
径向渐变颜色rg.addColorStop(offset,color) 参数解释同上
5.清除画布
ctx.clearRect(x,y,width,height) x表示清除起点横坐标,width表示清除的宽度
清除整个画布-----ctx.clearRect(0,0,cvs.width,cvs.height)
其中就有绘图的方法