canvas-阴影及透明度

一、 阴影

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