Canvas绘制简单图形
Canvas简单使用
canvas元素本省并不能实现图形绘制功能，绘制图形的工作需要有JavaScript来完成。
绘制直线
moveTo,lineTo,stroke。
绘制直线
fillStyle="#FF00FF";fillRect(0,0,200,100);绘制实心矩形
strokeStyle="#ffffff";strokeRect(0,0,100,50);绘制矩形轮廓
以下表示颜色的方式等价
fillStyle="#FF0000";
fillStyle="red";
fillStyle="rgb(255,0,0)";
fillStyle="rgb(100%,0%,0%)";
fillStyle="rgba(255,0,0,1)";
绘制圆形
context.arc(x,y,radius,startAngle,endAngle,anticlockwise);anticlockwise表示是否按照顺时针方向绘制。
下面的示例帮助你更好的理解
你可以去掉context.closePath();看一下有什么变化
绘制三角形
- 实心三角形
- 空心三角形
清空画布
context.clearRect(x,y,width,height);
绘制贝塞尔曲线
绘制二次方贝塞尔曲线
context.quadraticCurveTo(cp1x,cp1y,x,y);
其中参数cp1x，和cp1y是控制点的坐标，x和y是终点坐标。
绘制三次方贝塞尔曲线
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
其中参数cp1x，和cp1y是第一个控制点的坐标，参数cp2x，和cp2y是第二个控制点的坐标，x和y是终点坐标。
图形的变换
保存与回复Canvas状态
context.save();
context.restore();
你可以尝试删除context.restore()，对比一下前后的差别
移动坐标空间
context.translate(dx,dy);移动坐标原点在屏幕中的位置默认左上角(0,0)移动一次之后原点(dx,dy);
旋转坐标空间
context.rotate(angle);用于以原点为中心旋转Canvas
缩放图形
context.scale(x,y);
x,为横轴的缩放因子，y为纵轴的缩放因子
矩阵变换
transform方法用于直接对变形矩阵作修改
- 矩阵移动
context.transform(0,1,1,0,dx,dy);
或
context.transform(1,0,0,1,dx,dy); - 缩放
context.transform(m11,0,0,m22,0,0);
或
context.transform(0,m12,m21,0,0,0);
对应的结果
x'=(m11)x
y'=(m22)y;
或
x'=(m12)x
y'=(m21)y;
- 旋转
context.transform(cosθ,sinθ,-sinθ,cosθ,0,0);
x'=x*cosθ-y*sinθ
y'=x*sinθ+y*cosθ
context.setTransform(m11,m12,m21,m22,dx,dy);
setTransform用于将当前的变换矩阵重置为最初的矩阵，然后以相同的参数调用transform方法，即先set(重置)再transform(变换)。
图形的组合与裁切
图形的组合
通过指定图形globalCompositeOperation属性的值改变重叠图形的绘制顺序与绘制方式。
globalCompositeOperation属性所有可用的值
| 属性值 | 说明 |
|---|---|
| source-over(默认值) | A over B，这是默认设置，即新图形覆盖再原有内容上 |
| destination-over | B over A，即原有内容覆盖在新图形上 |
| source-atop | 只绘制原有内容和新图形与原有内容重叠的部分，且新图形位于原有内容之上 |
| destination-atop | 只绘制新图形和新图形与原有内容重叠的部分，且原有内容位于重叠部分之下 |
| source-in | 新图形只出现再原有内容重叠的部分，其余区域变为透明 |
| destination-in | 原有内容只出现在与新图形重叠的部分，其余区域为透明 |
| source-out | 新图形中与原有内容不重叠的部分被保留 |
| destination-out | 原有内容中与新图形不重叠的部分被保留 |
| lighter | 两图形重叠的部分作加色处理 |
| darker | 两图形重叠的部分作减色处理 |
| copy | 只保留新图形，在Chrome浏览器中无效，Opera11.5中有效 |
| xor | 将重叠的部分变为透明 |
裁切路径
clip方法用于裁切路径
更多的颜色和样式选项
应用不同的线型
lineWidth=value
lineCap=type
lineJoin=type
lineLimit=value
- lineWidth(设置线条的粗细)
lineSet
- lineCap(设置端点样式)
- lineJoin(设置连接处样式)
round,bevel,miter默认miter。
- miterLimit(设置绘制焦点的方式)
miterLimit属性的值用于设置两条线段链接处焦点的绘制方式，当宽线条使用lineJoin属性并将其值设置为miter时，如果绘制两条线断并以锐角相交，所得到的斜面可能会非常长。miterLimit的作用是为斜面的长度设置一个上限，默认为10，即规定斜面的长度不能超过线宽的10倍。当lineJoin属性为其他事，该值无效。
绘制线型渐变
context.createLinearGradient(x1,y1,x2,y2);
绘制径向渐变
context.createRadialGradient(x1,y1,r1,x2,y2,r2);
绘制图案
context.createPattern(image,type);
repeat:同时沿x轴y轴方向平铺
repeat-x:沿x轴方向平铺
repeat-y:沿y轴方向平铺
no-repeat:不平铺
设置图形的透明度
rgba(R,G,B,A);
创建阴影
context.shadowOffsetX=float;
context.shadowOffsetY=float;
context.shadowBlur=float;
context.shadowColor=color;
绘制文字
绘制填充文字
context.fillText(text,x,y,[maxWidth]);
文字相关属性
font;textAlign;textBaseline;
绘制轮廓字体
context.strokeText(text,x,y,[maxWidth]);
测量文字宽度
metrics=context.measureText(text);