Использование холста Можете ли вы создать эффект свечения на полупрозрачную форму?

Question

У меня полупрозрачная форма:

ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.beginPath();  
ctx.moveTo(0, 150);  
ctx.lineTo(300, 0);  
ctx.lineTo(300, 450);
ctx.lineTo(50, 500);
ctx.closePath();
ctx.fill();

Я хочу добавить немного тени, но я хочу, чтобы это появилось только за пределами формы, я думаю, что больше света, чем тень. Есть ли способ сделать это в холсте как мои попытки:

ctx.shadowBlur    = 5;
ctx.shadowColor   = 'rgba(0, 0, 0, 0.25)';

Посмотрите сказочную, как темная тень видна через полупрозрачную форму.

Спасибо!

Answer 1

Я думаю, что самый простой способ сделать это создать обрезной область, который включает в себя все за пределами формы, а затем нарисуйте тень там.

Здесь есть описание создания перевернутых областей зажима здесь: Forum.whatwg.org..

По сути, для вас шаги будут:

ctx.save();  // store initial clip region

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, canvas.width);
ctx.lineTo(canvas.height, canvas.width);
ctx.lineTo(canvas.height, 0);
ctx.lineTo(0, 0);
// {subpath of your shape here}
ctx.clip()

Затем включите тени и нарисуйте свою форму.

Восстановить исходный регион клип:

ctx.restore()

Тогда без теней нарисуйте свою форму как обычно.