canvas技术整理

canvas技术整理

  1 html
  2 
  3 
  4 javascript
  5 var canvas = document.getElementById('canvas')
  6 var context =canvas.getContext('2d')
  7 //使用context进行绘制
  8 
  9 canvas.width
 10 canvas.height
 11 canvas.getContext('2d')
 12 
 13 moveTo(x,y)
 14 lineTo(x,y)
 15 beginPath()
 16 closePath()
 17 
 18 lineWith                     //线条宽度
 19 strokeStyle                  //线条样式
 20 fillStyle                    //填充颜色
 21 stroke()                     //绘制
 22 fill()                       //填充
 23 
 24 rect(x,y,width,height)       //勾勒矩形边框路径
 25 fillRect(x,y,width,height)   //填充矩形
 26 strokeRect(x,y,width,height) //绘制带边框的路径
 27 
 28 //线条属性
 29 lineWith                     //线条宽度
 30 lineCap="butt"(default)      //线条帽子的形状
 31         "round"                圆形
 32         "square"               方形
 33 lineJion="miter"(default)      尖角
 34          "bevel"               斜切
 35          "round"               圆角
 36     miterLimit
 37 
 38 //图形变换
 39 save()
 40 restore()
 41 
 42 translate(x,y)
 43 rotate(deg)
 44 scale(sx,sy)
 45 
 46 //变换矩阵
 47 [a c e]    [水平缩放(1)   垂直倾斜(0)   水平位移(0)]
 48 [b d f]    [水平倾斜(0)   垂直缩放(1)   垂直位移(0)]
 49 [0 0 1]
 50 transfrom(a,b,c,d,e,f)      //效果会累加
 51 setTransform(a,b,c,d,e,f)   //仅使用该效果
 52 
 53 //渐变色和纹理
 54 fillStyle = color / gradient / image / canvas / video
 55             color格式：#ffffff / #642 / rgb / rgba / hsl / hsla / red
 56             gradient格式：Linear Gradient(线性渐变)
 57                           var grd = context.createLinearGradient(xstart,ystart,xend,yend);
 58                           Radial Gradient(径向渐变)
 59                           var grd = context.createRadialGradient(xstart,ystart,xend,yend);
 60                         grd.addColorStop(stop,color);
 61             image||canvas||video格式：
 62                           createPattern(img / canvas / video , repeat-style)
 63                           repeat-style:no-repeat / repeat-x / repeat-y / repeat
 64 
 65 //曲线的绘制
 66 context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false)
 67 context.crcTo(x1,y1,x2,y2,radius)
 68 
 69 context.quadraticCurveTo(x1,y1,        //控制点
 70                          x2,y2)        //结束点
 71 context.bezeirCurveTo(x1,y1,x2,y2,     //控制点
 72                       x3,y3)           //结束点
 73 
 74 //文字渲染
 75 context.font="bold 40px Arial"
 76 context.fillText(string,x,y,[maxlen]);
 77 context.strokeText(string,x,y,[maxlen]);
 78 
 79 font
 80 默认值："20px sans-serif"
 81 context.font = font-style  font-variant  font-weight  font-size  font-family
 82                font-style:  normal       (Default)
 83                             italic       (斜体字)
 84                             oblique      (倾斜字体)
 85                font-variant:normal       (Default)
 86                             small-caps   (以英文小写显示大写字母)
 87                font-weight: lighter
 88                             normal       (Deafult)
 89                             bold
 90                             bolder
 91                             100,200,300,400(normal),500,600,700(bold),800,900
 92                font-size:   20px         (Deafult)
 93                             2em
 94                             150%
 95                             xx-small  x-small  medium  large  x-large  xx-large
 96                font-famly:  设置多种字体备选 / 支持@font-face / web安全字体
 97 context.textAlign = left / center / right
 98 context.textBaseline = top / middle / bottom   (垂直对齐)
 99                        alphabetic(Deafult)     (基于拉丁字母设计的垂直对齐)
100                        ideographic             (基于方块字体设计的垂直对齐)
101                        hanging                 (基于印度语设计的垂直对齐)
102 
103 //图片
104 drawImage(image,dx,dy)
105 drawImage(image,dx,dy,dw,dh)
106 drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
107         dx,dy：image在canvas中定位的坐标值；
108         dw,dh：image在canvas中即将绘制区域的宽高；（相对于dx,dy坐标的偏移量）
109         sx,sy：image在canvas中所要绘制的起始位置；
110         sw,sh：image在canvas中所要绘制区域的宽高；（相对于sx,sy坐标的偏移量）
111 getImageData(x,y,w,h)
112 putImageData(imgdata,dx,dy,sx,sy,sw,sh)
113 createImageData(sw,sh)
114 createImageData(imagedata)
115 
116 //阴影
117 context.shadowColor
118 context.shadowOffsetX        //X偏移
119 context.shadowOffsetY        //Y偏移
120 context.shadowBlur           //模糊
121 
122 //高级
123 globalAlpha = 1              (默认值)
124 globalCompositeOperation = "source-over"        (默认值)
125           参数：source-over         destination-over              lighter
126                 source-atop         destination-atop              copy
127                 source-in           destination-in                xor
128                 source-out          destination-out
129 
130 //路径方向和剪纸效果
131      非零环绕原则
132 
133 //剪辑区域
134 context.clip();              =>探照灯
135 
136 //交互
137 context.clearRect(x,y,width,height)
138 context.isPointInPath(x,y)