《绘图功能Canvas》由会员分享，可在线阅读，更多相关《绘图功能Canvas（8页珍藏版）》请在金锄头文库上搜索。
1、绘图功能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对象
2、至初始状态，这个简朴的函数不带任何参数，它来告知canvas将要开始绘制一种新的图形了。moveTo（X，Y）措施可以设立绘图起始坐标，lineTo（X，Y）等画线措施可以从目前起点绘制直线、圆弧，以及曲线到目的位置。closePath（）措施将自定义图形进行闭合，该措施将自动创立一条从目前坐标到起始坐标的直线。一旦拟定完毕，则需要继续调用stroke（）和fill（）函数来完毕将途径渲染到画面的最后一步。beginPath（）：开始一种新途径moveTo（X，Y）：移动途径的绘图起点lineTo（X，Y）：从moveTo定义的点开始绘制持续的途径，或者从上一次的lineTo的终点开始绘制。c
3、losePath（）：连接最后的点和最初的点并关闭途径绘制。描边样式：lineWidth是指描边的线条宽度lineJoin用来修饰目前形状中线段的连接方式，可以把它的值设立为round、bevel和miter3个选项。lineCap用来指定线条末端的样式，可以把它设立为butt、square或roundmiterLimit用来设定外延交点与连接点的最大距离strokeStyle用来变化线条的颜色。绘制曲线：1、 arc（X，Y，radius，startAngle，endAngle，anticlockwise）参数X和Y为圆心坐标，r为半径，startAngle为起始角度，endAngle为结束
4、角度，anticlockwise为顺时针还是逆时针。2、 bezierCurveTo（cp1x，cp1y,cp2x,cp2y,x,y）cp1x为第一种控制点的横坐标，cp1y为第一种控制点的纵坐标，cp2x为第二个控制点的横坐标，cp2y为第二个控制点的纵坐标，x为贝济埃曲线的终点横坐标，y为贝济埃曲线的终点纵坐标。3、 quadraticCurveTo（cpX，cpY，x，y）cpX为控制点的横坐标，cpY为控制点的纵坐标，x为曲线终点的横坐标，y为曲线终点的纵坐标。在canvas中插入图像在drawImage（img，x，y）措施中，image是image或者canvas对象，x和y是其在
5、目的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偏移量，单位是像素。像素解决：
