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)