阴影的绘制主要依赖以下四个属性:
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');