HTML5 canvas создает внешний эффект свечения формы - PullRequest
Новая
       10

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

22 голосов
/ 21 февраля 2011

Я хочу создать внешний эффект свечения для фигур дуг в моем тэге canvas. Вот как это должно выглядеть: enter image description here

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

Что вы предлагаете? Может быть формы с градиентом от синего до черного? Заранее спасибо!

Редактировать: Наконец-то все заработало. Использовал цикл for для рисования кругов с различным радиусом и альфа. enter image description here

Ответы [ 5 ]

51 голосов
/ 14 марта 2012

Вы можете создать внешнее свечение, используя тень следующим образом: 

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

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

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

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

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

10 голосов
/ 17 мая 2013

Тень со смещением 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>

path with glow on html5 canvas

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

9 голосов
/ 21 февраля 2011

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

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

4 голосов
/ 31 марта 2017

Цикл - это действительно решение, но без воспроизведения радиуса и альфы.Просто установите толщину ширины линии и тень с нулевыми смещениями и приличным размытием, затем нарисуйте дуги в цикле ... некоторые ... как при 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();
}
1 голос
/ 23 июля 2016

Мне было любопытно найти лучшее решение этой проблемы, поскольку я пытаюсь сделать что-то подобное, и это все еще лучший ответ в 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)

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...