Холст HTML5 создает внешний эффект свечения формы
Я хочу создать внешний эффект свечения для дуговых фигур в теге canvas.
Это то, что должно было выглядеть так:
![enter image description here]()
Пока у меня есть круги в белом цвете. Я попытался использовать dropShadow, у которого есть смещение "0", но это выглядит неправильно.
Что вы предлагаете? Может быть, формы внизу, которые имеют градиент от синего до черного?
Спасибо заранее!
Изменить: Наконец-то он работает. Используется для цикла для рисования кругов с разным радиусом и альфой.
![enter image description here]()
Ответы
Ответ 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>
![path with glow on html5 canvas]()
Если вы просто замените мою геометрию линии на ваши дуги окружности, вы сможете создать этот эффект без файлов изображений.
Ответ 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)
![введите описание изображения здесь]()