canvas技术整理
canvas技术整理
1 html 2 <canvas id= "canvas"></canvas> 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)
