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