canvas技术整理

canvas技术整理

1 html 2 <canvas id= "canvas"></canvas> 3 4 javascript 5 var canvas = document.getElementById('canvas') 6 var context =canvas.getContext('2d') canvas.width 10 canvas.height 11 canvas.getContext('2d') 12 13 moveTo(x,y) 14 lineTo(x,y) 15 beginPath() 16 closePath() strokeStyle fillStyle stroke() fill() rect(x,y,width,height) fillRect(x,y,width,height) strokeRect(x,y,width,height) lineWith lineCap="butt"("round" 圆形 32 "square" 方形 33 lineJion="miter"(default) 尖角 34 "bevel" 斜切 35 "round" 圆角 36 miterLimit save() 40 restore() 41 42 translate(x,y) 43 rotate(deg) 44 scale(sx,sy) [a c e] [水平缩放(1) 垂直倾斜(0) 水平位移(0)] 48 [b d f] [水平倾斜(0) 垂直缩放(1) 垂直位移(0)] 49 [0 0 1] setTransform(a,b,c,d,e,f) 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 context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false) 67 context.crcTo(x1,y1,x2,y2,radius) x2,y2) context.bezeirCurveTo(x1,y1,x2,y2, x3,y3) 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 (基于印度语设计的垂直对齐) 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) context.shadowColor context.shadowOffsetY context.shadowBlur 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 非零环绕原则 context.clip(); =>探照灯 context.clearRect(x,y,width,height) 138 context.isPointInPath(x,y)

posted @