canvas技术整理

canvas技术整理

 html
 <canvas id= "canvas"></canvas>

 javascript
 var canvas = document.getElementById('canvas')
 var context =canvas.getContext('2d')
 //使用context进行绘制

 canvas.width
 canvas.height
 canvas.getContext('2d')

 moveTo(x,y)
 lineTo(x,y)
 beginPath()
 closePath()

 lineWith                     //线条宽度
 strokeStyle                  //线条样式
 fillStyle                    //填充颜色
 stroke()                     //绘制
 fill()                       //填充

 rect(x,y,width,height)       //勾勒矩形边框路径
 fillRect(x,y,width,height)   //填充矩形
 strokeRect(x,y,width,height) //绘制带边框的路径

 //线条属性
 lineWith                     //线条宽度
 lineCap="butt"(default)      //线条帽子的形状
         "round"                圆形
         "square"               方形
 lineJion="miter"(default)      尖角
          "bevel"               斜切
          "round"               圆角
     miterLimit

 //图形变换
 save()
 restore()

 translate(x,y)
 rotate(deg)
 scale(sx,sy)

 //变换矩阵
 [a c e]    [水平缩放(1)   垂直倾斜(0)   水平位移(0)]
 [b d f]    [水平倾斜(0)   垂直缩放(1)   垂直位移(0)]
 [0 0 1]
 transfrom(a,b,c,d,e,f)      //效果会累加
 setTransform(a,b,c,d,e,f)   //仅使用该效果

 //渐变色和纹理
 fillStyle = color / gradient / image / canvas / video
             color格式：#ffffff / #642 / rgb / rgba / hsl / hsla / red
             gradient格式：Linear Gradient(线性渐变)
                           var grd = context.createLinearGradient(xstart,ystart,xend,yend);
                           Radial Gradient(径向渐变)
                           var grd = context.createRadialGradient(xstart,ystart,xend,yend);
                         grd.addColorStop(stop,color);
             image||canvas||video格式：
                           createPattern(img / canvas / video , repeat-style)
                           repeat-style:no-repeat / repeat-x / repeat-y / repeat

 //曲线的绘制
 context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false)
 context.crcTo(x1,y1,x2,y2,radius)

 context.quadraticCurveTo(x1,y1,        //控制点
                          x2,y2)        //结束点
 context.bezeirCurveTo(x1,y1,x2,y2,     //控制点
                       x3,y3)           //结束点

 //文字渲染
 context.font="bold 40px Arial"
 context.fillText(string,x,y,[maxlen]);
 context.strokeText(string,x,y,[maxlen]);

 font
 默认值："20px sans-serif"
 context.font = font-style  font-variant  font-weight  font-size  font-family
                font-style:  normal       (Default)
                             italic       (斜体字)
                             oblique      (倾斜字体)
                font-variant:normal       (Default)
                             small-caps   (以英文小写显示大写字母)
                font-weight: lighter
                             normal       (Deafult)
                             bold
                             bolder
                             100,200,300,400(normal),500,600,700(bold),800,900
                font-size:   20px         (Deafult)
                             2em
                             150%
                             xx-small  x-small  medium  large  x-large  xx-large
                font-famly:  设置多种字体备选 / 支持@font-face / web安全字体
 context.textAlign = left / center / right
 context.textBaseline = top / middle / bottom   (垂直对齐)
                        alphabetic(Deafult)     (基于拉丁字母设计的垂直对齐)
                        ideographic             (基于方块字体设计的垂直对齐)
                        hanging                 (基于印度语设计的垂直对齐)

 //图片
 drawImage(image,dx,dy)
 drawImage(image,dx,dy,dw,dh)
 drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
         dx,dy：image在canvas中定位的坐标值；
         dw,dh：image在canvas中即将绘制区域的宽高；（相对于dx,dy坐标的偏移量）
         sx,sy：image在canvas中所要绘制的起始位置；
         sw,sh：image在canvas中所要绘制区域的宽高；（相对于sx,sy坐标的偏移量）
 getImageData(x,y,w,h)
 putImageData(imgdata,dx,dy,sx,sy,sw,sh)
 createImageData(sw,sh)
 createImageData(imagedata)

 //阴影
 context.shadowColor
 context.shadowOffsetX        //X偏移
 context.shadowOffsetY        //Y偏移
 context.shadowBlur           //模糊

 //高级
 globalAlpha = 1              (默认值)
 globalCompositeOperation = "source-over"        (默认值)
           参数：source-over         destination-over              lighter
                 source-atop         destination-atop              copy
                 source-in           destination-in                xor
                 source-out          destination-out

 //路径方向和剪纸效果
      非零环绕原则

 //剪辑区域
 context.clip();              =>探照灯

 //交互
 context.clearRect(x,y,width,height)
 context.isPointInPath(x,y)