Canvas之图形阴影

Canvas之图形阴影

ctx.shadowBlur = 15;
ctx.shadowColor = '#666';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

ctx.clearRect(0, 0, 400, 400);
ctx.beginPath();
const gradient = ctx.createRadialGradient(170, 170, 30, 200, 200, 100);
gradient.addColorStop(0, '#d00');
gradient.addColorStop(1, '#800');

ctx.fillStyle = gradient;
ctx.arc(200, 200, 100, 0, Math.PI * 2);
ctx.fill();

设置一个图形的阴影有四个 API 。ctx.shadowBlur 设置图形的模糊程度，数值越大，模糊程度越高。ctx.shadowColor 设置阴影颜色，ctx.shadowOffsetX ，ctx.shadowOffsetY 设置阴影的 x ，y 方向的偏移量。
可以自己设置阴影的方向，并配合渐变效果形成一个立体的图形。