Холст HTML5 создает внешний эффект свечения формы

Я хочу создать внешний эффект свечения для дуговых фигур в теге canvas. Это то, что должно было выглядеть так:

Пока у меня есть круги в белом цвете. Я попытался использовать dropShadow, у которого есть смещение "0", но это выглядит неправильно.

Что вы предлагаете? Может быть, формы внизу, которые имеют градиент от синего до черного? Спасибо заранее!

Изменить: Наконец-то он работает. Используется для цикла для рисования кругов с разным радиусом и альфой.

Ответ 1

Являются ли файлы образов кругов? Если это так, создайте файлы изображений со свечением, применяемым к ним в Photoshop, GIMP и т.д. Сохраните их как .PNG, чтобы сохранить прозрачность фона.

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

Ответ 2

Вы можете создать внешнее свечение, используя тень, как это:

context.shadowBlur = 10;
context.shadowColor = "black";

Взгляните на эту ссылку: http://www.williammalone.com/articles/html5-canvas-example/

И здесь действительно базовый JSFiddle.

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

Надеюсь, это поможет!

Ответ 3

Тень с 0 смещением, большой радиус размытия и "светлый" теневой цвет в основном выглядит как свечение. Мне нужно было поставить зеленое "свечение" на произвольно заполненный путь, и мой код выглядел так:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(20, 80);
      context.lineTo(80, 20);
      context.lineTo(550, 20);
      context.lineTo(550, 130);
      context.lineTo(490, 190);
      context.lineTo(20, 190);
      context.lineTo(20, 80);

      //context.rect(188, 40, 200, 100);
      context.fillStyle = 'red';
      context.strokeStyle = '#00ff00';
      context.lineWidth = 10;
      context.shadowColor = '#00ff00';
      context.shadowBlur = 40;
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 0;
      context.stroke();
      context.fill();
    </script>
  </body>
</html>

Если вы просто замените мою геометрию линии на ваши дуги окружности, вы сможете создать этот эффект без файлов изображений.

Ответ 4

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

ctx.fillStyle='black';
ctx.fillRect(0,0,500,500);
ctx.lineWidth=25;
ctx.strokeStyle='white';
ctx.shadowColor='blue';
ctx.shadowOffsetX=0;
ctx.shadowOffsetY=0;
ctx.shadowBlur=25;
for(a=0;a<10;a++) {
    ctx.beginPath();
    ctx.arc(250,250,200,Math.PI/12,23*Math.PI/12);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(250,250,100,7*Math.PI/12,5*Math.PI/12);
    ctx.stroke();
}

Ответ 5

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

Итак, вот код, результат и JSFIddle для решения, с которым я пришел, что-то похожее на принятый ответ. Он работает, используя то же значение альфа, но изменяя толщину линии, которая имеет аддитивный эффект. Обратите внимание на использование lineCap, которое также добавит свечение к концам линий.

const canvas = document.getElementById('canvas') 
const c = canvas.getContext('2d')
    canvas.width = 240
    canvas.height = 340
const gradient = c.createLinearGradient(0, 0, 150, 300);
    gradient.addColorStop(0, '#444')
    gradient.addColorStop(1,'#000')
    c.fillStyle = gradient
c.fillRect(0, 0, canvas.width, canvas.height)

const drawC = function (radius, maxWidth, minWidth) {
  const inc = (maxWidth - minWidth) / 5
  for (let width = maxWidth; width >= minWidth; width -= inc) {
    c.lineWidth = width
    if (width > 10) { 
      c.strokeStyle = 'rgba(50, 50, 255, 0.2)'
    } else {
      c.strokeStyle = 'white' 
    }
    c.lineCap = 'square'
    c.beginPath()
    c.arc(0, 0, radius, 2 * Math.PI * 0.04, 2 * Math.PI * 0.96)
    c.stroke()
  }
}

c.translate(120, 170)
drawC(70, 30, 10)
c.rotate(2 * Math.PI * 0.75)
drawC(100, 20, 4)