Canvas阴影绘制

阴影的绘制主要依赖以下四个属性：

• shadowOffsetX：阴影x方向的偏移距离
• shadowOffsetY：阴影y方向的偏移距离
• shadowColor：阴影的颜色
• shadowBlur：阴影的模糊半径

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 阴影的x偏移
ctx.shadowOffsetX = 10;
// 阴影的y偏移
ctx.shadowOffsetY = 10;
// 阴影颜色
ctx.shadowColor = 'rgba(0,0,0,0.5)';
// 阴影的模糊半径
ctx.shadowBlur = 10;
ctx.fillStyle = 'rgba(255,0,0,0.5)'
ctx.fillRect(100, 100, 100, 100);

需要注意的是，阴影的偏移是以绘制图形的左上角为坐标原点来计算的。

而且，设置的阴影相关属性会对后面绘制的图形产生影响。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 阴影的x偏移
ctx.shadowOffsetX = 10;
// 阴影的y偏移
ctx.shadowOffsetY = 10;
// 阴影颜色
ctx.shadowColor = 'rgba(0,0,0,0.5)';
// 阴影的模糊半径
ctx.shadowBlur = 10;
ctx.fillStyle = 'rgba(255,0,0,0.5)'
ctx.fillRect(100, 100, 100, 100);
ctx.font = '50px sans-serif';
ctx.fillText('Hello Wolrd');