合成与路径剪裁
透明度合成 globalAlpha
- globalAlpha 就是全局对象的透明度,全局对象就是canvas 的上下文对象。
- 使用方法:ctx.globalAlpha=0.6;
注意:globalAlpha 要和颜色里的rgba 区别一下。rgba 控制的是某种颜色的透明度;globalAlpha 相当于是让整个画布变透明了。
const canvas=document.getElementById('canvas');
//canvas充满窗口
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
//画笔
const ctx=canvas.getContext('2d');
/*透明度合成 globalAlpha,取值范围[0,1]*/
ctx.save();
ctx.globalAlpha=0.5;
ctx.fillRect(50,50,400,200);
ctx.fillRect(150,150,400,200);
ctx.restore();
ctx.fillRect(250,250,400,200);
路径裁剪 clip()
- 路径裁剪就是在画布上设置一个路径,让我们之后绘制的图像只显示在这个路径之中。
- 路径裁剪的步骤:
- 定义路径
- ctx.clip()
- 绘制其它图形
const canvas=document.getElementById('canvas');
//canvas充满窗口
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
//画笔
const ctx=canvas.getContext('2d');
ctx.save();
ctx.beginPath();
ctx.arc(300,300,100,0,Math.PI*2);
ctx.stroke();
// ctx.fillText('好好学习',300,300);
ctx.clip();
ctx.fillRect(300,300,100,100);
ctx.restore();
// ctx.fillRect(300,300,100,100);
全局合成 globalCompositeOperation
- 全局合成是canvas 画布中的已绘图像和将绘图像的融合方式。
- 可以从形状和色彩两方面解读全局合成。
- 如:
- 先画一个黄色的正方形
- 设置全局合成的属性
- 再绘制一个绿色的圆
const canvas=document.getElementById('canvas');
//canvas充满窗口
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
//画笔
const ctx=canvas.getContext('2d');
//正方形
ctx.fillStyle='orange';
ctx.fillRect(100,100,200,200);
//设置全局合成属性
ctx.globalCompositeOperation='source-in';
//圆
ctx.beginPath();
ctx.arc(300,300,100,0,Math.PI*2);
ctx.fillStyle='green';
ctx.fill();