HTML5 Canvas一些常用的操作
粗略的Canvas API
1、 context
- var context = canvas.getContext('2d');
2、Canvas state
- context.save();//将当前状态压入状态栈中，保存当前的状态
- context.restore();//将状态栈中的栈顶元素出栈，恢复上次的状态
3、Line styles
- context.lineWidth[= value] ;//线宽
- context.lineCap[= value]; //线的开始和结束部分的形状（butt：没有,round：圆,square:方）
- context.lineJoin[= value]; // 线相交部分的形状（bevel：尖角，round：圆角，miter：按照一个既定值来设置）
- context.miterLimit[= value]; //设置context.lineJoin为miter时的既定值。
- context.setLineDash()
- context.getLineDash()
- context.lineDashOffset
4、Text styles
- context.font [= value];//字体，和CSS写法一致
- context.textAlign [= value];// 水平对齐（start,end,left,right,middle）
- context.textBaseLine [=value];//设置竖直方向的基准线 （取值：top,hanging,middle,alphabetic,ideographic,bottom）
5、Building Path
- context.moveTo(x,y);
- context.closePath();
- context.lineTo(x,y);
- context.quadraticCurveTo(cpx,cpy,x,y);//2次贝塞尔曲线
- context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);//3次贝塞尔曲线
- context.arcTo(x1,y1,x2,y2,radius);//画一段圆弧
- context.arc(x,y,radius,startAngle,endAngle);//画一段圆弧
- context.rect(x,y,w,h);//画一个矩形
6、Transformations
- context.scale(x,y);//缩放
- context.rotate(angle);//旋转
- context.translate(x,y);//平移
- context.transform(a,b,c,d,e,f);
- context.setTransform(a,b,c,d,e,f);
7、Fill and stroke styles
- context.fillStyle [= value];//填充
- context.strokeStyle [= value];//描边
- 填充和描边的值可以为：CSS color,CancasGradient(canvas的渐变效果)，CanvasPattern
- var gradient = context.createLinearGradient(x0,y0,x1,y1);//线性渐变
- var gradient = context.createRadialGradient(x0,y0,r0,x1,y1,r1);//放射性渐变
- gradient.addColorStop(offset,color);//设置每个阶段的过渡颜色（offset为0.0~1.0之间）
- var pattern =context.createPattern(image,repetition);//设置背景图以及重复效果,image的值可以为HTMLImageElement,HTMLCanvasElement,HTMLVideoElement。repetition的值为：repeat,repeat-x,repeat-y,no-repeat
8、Drawing rectangles to the canvas
- context.clearRect(x,y,w,h);//清楚某个矩形区域内的所有图形
- context.fillRect(x,y,w,h);//填充某个矩形区域
- context.strokeRect(x,y,w,h);//对某个矩形区域进行描边
9、Drawing text to the canvas
- context.fillText(text,x,y,[,maxWidth]);//填充文字，参数依次为：要填写的值，起始x坐标，起始y坐标，最大宽度（可选））
- context.strokeText(text,x,y,[,maxWidth]);//对字体进行描边
- var metrics = context.measureText(text);
- metrics.width;
10、Drawing paths to the canvas
- context.beginPath();
- context.fill();
- context.stroke();
- context.drawFocusIfNeed(element);
- context.clip();
- context.isPoingInPath(x,y);
11、Dawing images to the canvas
- context.drawImage(image,dx,dy);
- context.drawImage(image,dx,dy,dw,dh);
- context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);//其中s开头的属性表示为图像源的属性，d开头的属性表示在canvas上的属性。
- image 的值为 HTMLImageElement,HTMLCanvasElement,HTMLVideoElement
参考资料：http://www.w3.org/TR/2dcontext/
