文档详情

绘图功能Canvas.doc

发布:2016-10-01约1.81千字共8页下载文档
文本预览下载声明
绘图功能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偏移量,单位是像素。 像素处理:
显示全部
相似文档