Используя холст, можете ли вы создать эффект свечения на полупрозрачной фигуре? - PullRequest
Новая
       14

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

1 голос
/ 02 сентября 2010

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

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)';

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

Спасибо!

1 Ответ

2 голосов
/ 02 сентября 2010

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

Описание создания областей инвертированных клипов здесь: forums.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()

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

...