一、 阴影
ctx.shadowColor = ‘color’; // 阴影颜色
ctx.shadowOffsetX = ''; // 阴影的偏移量
ctx.shadowOffsetY = ''; // 阴影的偏移量
ctx.shadowBlur = ''; //模糊度
// 提前保存一下当前状态
ctx.save();
// 设置阴影颜色
ctx.shadowColor = 'red';
// 偏移量X
ctx.shadowOffsetX = 0;
// 偏移量Y
ctx.shadowOffsetY = 0;
// 模糊度
ctx.shadowBlur = 100;
//
ctx.fillRect(150, 150, 100, 100);
// 返回上一次状态
ctx.restore()
image.png
二、全局的透明度
globalAlpha = 1 // 全局透明度
// 提前保存一下当前状态
ctx.save();
// 全局透明度
ctx.globalAlpha = .3;
ctx.beginPath();
ctx.font = '20px bold';
ctx.fillText('透明度： .3', 50, 40)
ctx.arc(100, 100, 30, 0, 2 * Math.PI);
ctx.fill();
ctx.fillRect(50, 200, 100, 100);
// 返回上一次状态
ctx.restore()
// 未设置透明
ctx.beginPath();
ctx.font = '20px bold';
ctx.fillText('透明度： 1', 250, 40)
ctx.arc(300, 100, 30, 0, 2 * Math.PI);
ctx.fill();
ctx.fillRect(250, 200, 100, 100);
image.png
