canvas基础

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)

 

其中就有绘图的方法