绘图功能Canvas讲解.doc

绘图功能Canvas 绘制矩形 目前有三种绘制矩形的语法： fillRect(x,y,width,height):绘制一个实心矩形 strokeRect(x,y,width,height):绘制一个矩形边框 clearRect(x,y,width,height):清楚指定的区域矩形 利用fillStyle和strokeStyle属性可以方便的设置矩形的填充和线条 例： 应用canvas API绘制曲线路径 在每个canvas实例对象中都拥有一个path对象，创建自定义图形的过程就是不断地对path对象操作的过程。每当开始一次新的图形绘制任务时，都需要先使用beginPath（）方法来重置path对象至初始状态，这个简单的函数不带任何参数，它来通知canvas将要开始绘制一个新的图形了。moveTo（X，Y）方法可以设置绘图起始坐标，lineTo（X，Y）等画线方法可以从当前起点绘制直线、圆弧，以及曲线到目标位置。closePath（）方法将自定义图形进行闭合，该方法将自动创建一条从当前坐标到起始坐标的直线。 一旦确定完成，则需要继续调用stroke（）和fill（）函数来完成将路径渲染到画面的最后一步。 beginPath（）：开始一个新路径 moveTo（X，Y）：移动路径的绘图起点 lineTo（X，Y）：从moveTo定义的点开始绘制连续的路径，或者从上一次的lineTo的终点开始绘制。 closePath（）：连接最后的点和最初的点并关闭路径绘制。 描边样式： lineWidth是指描边的线条宽度 lineJoin用来修饰当前形状中线段的连接方式，可以把它的值设置为round、bevel和miter3个选项。 lineCap用来指定线条末端的样式，可以把它设置为butt、square或round miterLimit用来设定外延交点与连接点的最大距离 strokeStyle用来改变线条的颜色。 绘制曲线： arc（X，Y，radius，startAngle，endAngle，anticlockwise） 参数X和Y为圆心坐标，r为半径，startAngle为起始角度，endAngle为结束角度，anticlockwise为顺时针还是逆时针。 bezierCurveTo（cp1x，cp1y,cp2x,cp2y,x,y） cp1x为第一个控制点的横坐标，cp1y为第一个控制点的纵坐标，cp2x为第二个控制点的横坐标，cp2y为第二个控制点的纵坐标，x为贝济埃曲线的终点横坐标，y为贝济埃曲线的终点纵坐标。 quadraticCurveTo（cpX，cpY，x，y） cpX为控制点的横坐标，cpY为控制点的纵坐标，x为曲线终点的横坐标，y为曲线终点的纵坐标。 在canvas中插入图像 在drawImage（img，x，y）方法中，image是image或者canvas对象，x和y是其在目标canvas中的起始坐标。 绘制渐变图像： 在canvas绘图中支持两种类型的渐变：线性渐变和放射性渐变 createLinearGradient（x0,y0,x1,y1）表示渐变的起点、终点 createRadialGradient(x0,y0,r0,x1,y1,r1)沿着两个圆之间的锥面绘制渐变。该方法创建并返回一个新的CanvasGradient对象，该对象在两个指定圆的圆周之间放射性的插入颜色，注意，这个方法并没有指定任何用来渐变的颜色。 缩放canvas对象 使用scale（X，Y）比如X为2，就代表所绘制的图像中全部元素都会变成两倍宽。 translate这个方法用来指定新的原点坐标，后续操作的坐标值都是相对于新的原点坐标来操作取值。若要恢复原点坐标，可以使用restore（）方法。 旋转rotate（angle），angle为正数时，按顺时针方向旋转。 Canvas文本应用： fillText（text，x，y，maxwidth）将对文本应用填充式渲染 strokeText（text，x，y，maxwidth）对文本进行描边渲染 shadowColor：阴影颜色 shadowBlur:设置阴影模糊程度 shadowOffsetX与shadowOffsetY：阴影的X和Y偏移量，单位是像素。 像素处理：