canvas弧形绘制

一、圆弧绘制

       圆弧轨迹：【上下文对象.arc（圆心横坐标，圆心纵坐标，圆弧半径，结束弧度，开始弧度，true）】

                        【上下文对象.arc（圆心横坐标，圆心纵坐标，圆弧半径，开始弧度，结束弧度，false）】

       说明：a、弧度参数写法为（0-2）*Math.PI

                 b、默认为false（逆时针）true表示顺时针

二、透明度【上下文对象.globalAlpha=0~1】

三、线型

      1、设置线宽：【上下文对象.linWidth=具体数值】

      2、设置端点：【上下文对象.lineCap=‘端点类型’】

                 butt无端点   round圆弧端点   square方块端点

      3、设置连接类型：【上下文对象.lineJoin=‘连接类型’】

                 round圆弧    bevel截面   miter直角

      4、设置虚线：【上下文对象.setLineDash（[第一段长度，第二段长度]）】

      5、设置偏移【上下文对象.lineDashoffset=数值】  

四、渐变

      1、线型渐变：【上下文对象.createLinearGradient(从x，从y，到x，到y)】

           设置渐变颜色:【***.addColorStop(第一个参数是0-1，第二个参数是颜色)】

      2、径向渐变：【上下文对象.creatRadialGradient(从x，从y，从r，到x，到y，到r)】

五、阴影

      【上下文对象.shadowColor='颜色'】

      【上下文对象.shadowBlur=模糊数值】

      【上下文对象.shadowOffsetX=水平偏移距离】

      【上下文对象.shadowOffsetY=垂直偏移距离】

       注意：阴影的设置必须存在于canvas内容之前，写在后面会导致失败

六、文字

      【上下文对象.font=‘大小px  字体’】

      【上下文对象.fillText('文本内容'，文本x，文本y)】

七、图片绘制

       绘制图片必须等到图片load完毕后再上屏，否则绘制失败

       关键方法：【上下文对象.drawImage（）】；

       相关方法：【上下文对象.drawImage（img，x，y）】

                        【上下文对象.drawImage（img，x，y，w，h）】

                        【上下文对象.drawImage（img，裁切x，裁切y，裁切w，裁切h，绘制x，绘制y，绘制w，绘制h）】

八、转换与变形

       在canvas中，变换是变换整个画布，不是变换图形

       所有的变换都必须在变换开始之前     先sava画布状态【上下文对象.save（）】

       所有变换结束后  再load画布状态【上下文对象.restore（）】

       已达到只改变目标图形的变换效果

       1、位移变换   translate（x，y）

       2、旋转变换   rotate（数值）

       3、比例变换   scale（x，y）

九、合成

     【上下文对象.globalCompositeOperation=‘不同绘制方式’】

      source-over  在上面画    

      source-in      在上面画，背景透明，溢出隐藏

      source-out    在上面画，背景透明，溢出显示

      source-atop  在上面画，溢出隐藏

      

      destination-over  在下面画    

      destination-in      在下面画，背景透明，溢出隐藏

      destination-out    在下面画，背景透明，溢出显示

     destination-atop    在下面画，溢出隐藏

     lighter  堆叠

     copy 绘制显示，原图隐藏

     xor   异或

十、像素级操作

      1、创建制定绘制区域：【上下文对象.creatImageData(区域w，区域h)】

       说明：a、本方法会返回一个数组

                  b、数组长度是w*h*4

                  c、数组中每四个元素代表一个像素：r g b a

      2、获取指定区域像素【上下文对象.getImageData（x，y，w，h）】

      3、绘制指定区域像素【上下文对象.putImageData（imgData，x，y）】