一,canvas
1,全局复合图形操作
ctx.globalCompositeOperation = type;
type用于设置新图形与原有图形的融合
type取值:
两种前缀:
以原图为准使用destination-
以新图为准使用source-
destination-over:原图覆盖新图
source-over:新图覆盖原图
destination-in:仅仅显示重叠部分,原图颜色;
source-in:仅仅显示重叠部分,新图颜色;
destination-out:仅仅显示不重叠部分,原图的
source-out:仅仅显示不重叠部分,新图的
destination-atop:重叠部分保留,原图覆盖新图,原图不重叠部分消失
source-atop:重叠部分保留,新图覆盖原图,新图不重叠部分消失
lighter:叠加部分做加色处理
darken:重叠部分做减色处理
xor:重叠部分变透明
copy:新图留下,其他消失
2,变形
画布中的变形都是ctx的变形,不是元素
3种:
1)ctx.translate(100,100)
坐标系平移,图形的坐标没有变,会跟随坐标系的移动而移动
2)ctx.rotate(1);//旋转1弧度
旋转弧度,(公转,绕着坐标原点旋转)
3)ctx.scale(1.5,2)//宽放大1.5倍,高2倍
缩放变形
3,绘制文本
fillText(txt,x,y,maxWidth);
strokeText(txt,x,y,maxWidth);
font = 'bold 20px 微软雅黑';
textAlign = 'left|center|right|start|end';
textBaseline = 'top|middle|bottom|Alphabetic|Hanging';
4,图像阴影
ctx.shadowColor = 'red';//阴影颜色
ctx.shadowBlur = 20;阴影模糊级别
ctx.shadowOffsetX=5;//设置阴影在X轴发那个像距离图形的距离
ctx.shadowOffsetY=5;//设置阴影在Y轴方向距离图像的距离
5,图片处理
平铺:createPattern(img,type);
img:图片
type:repeat
repeat-x|y
no-repeat
eg:
ctx.fillStyle = ctx.createPattern(img,'repeat-x');
ctx.fillRect(0,0,canvas.width,canvas.height);
图像裁剪:ctx.clip();
需要配合路径使用,先绘制好路径,然后调用clip
注:
一旦裁剪了某个区域,则之后的所有图形都被限制在这个区域,不能访问画布上的其他区域
像素处理:
getImageData(x,y,w,h);//可以指定获取指定区域内的像素点数据
x:x轴坐标
y:y轴坐标
w:指定区域的宽
h:指定区域的高
putImageData(imgData,x,y);//将获取的数据重新放回画布上
注:
必须服务器环境运行,不支持跨域
6,图像输出
这是一个canvas方法
canvas.toDataURL(type,args);
用来返回一个url地址,将canvas画布转为一张图片,这张图片是基于Base64编码的,如果不指定两个参数,无参调用该方法,转换的图像默认是png格式
type:图片格式 image/png,image/jpg....
args:如果type是image/jpeg,那么arges可以是0-1之间的值,表示指定的图像品质
注:
必须服务器环境运行,不支持跨域
7,transform()
添加一个新的变换矩阵
ctx.transform(a,b,c,d,e,f);
a,d 水平,垂直的缩放
b,c 水平,垂直倾斜
e,f 水平,垂直移动
注:
每当调用一次transform时,都会在前一个矩阵的基础上继续构造
8,setTransform()
重置并新建一个变形矩阵
ctx.setTransform(a,b,c,d,e,f);
9,save() & restore()
绘制复杂图形必不可少的方法,分别用来保存恢复ctx的状态
10,isPointInPath(x,y);
测试给定的坐标是否位于当前路径之内
返回值:true / false
注:
该方法仅仅对当前的路径有效