Effiziente HTML5 Canvas Glow-Effekt ohne Form

Question

Ich erstelle ein Spiel mit dem HTML5 Canvas-Element, und als eine der visuellen Effekte möchte ich ein Glühen (wie ein Licht) -Effekt erzeugen. Bisher habe ich für Glow-Effekte Lösungen gefunden, bei denen Schatten von Formen erzeugt werden, aber diese benötigen eine feste Form oder ein Objekt, um den Schatten zu werfen. Nach was ich suche, ist eine Weise, etwas wie ein Licht des Umgebungslichtes mit einem Quellort aber keinem Gegenstand an der Position zu verursachen.

Etwas dachte ich habe von war ein Mittelpunkt x und y und schaffen Hunderte von konzentrischen Kreisen zu definieren, wobei jedes 1 Pixel größer ist als die letzte und die jeweils mit einer sehr geringen Opazität, so dass sie zusammen einen festen Mittelpunkt und einen transparenten Rand erstellen . Dies ist jedoch sehr rechenintensiv und scheint überhaupt nicht elegant zu sein, da das resultierende Leuchten peinlich aussieht.

Während dies ist alles, was ich fragen und ich wäre mehr als glücklich, hier zu stoppen, Bonuspunkte, wenn Ihre Lösung ist A) rechnungsmäßig Licht, B) modifizierbar, um eine fokussierte Richtung des Lichts zu erzeugen, oder noch besser, C) wenn es eine Möglichkeit gäbe, ein "umgekehrtes" Lichtsystem zu schaffen, bei dem der gesamte Bildschirm durch eine Maske verdunkelt wird und der Schatten dort angehoben wird, wo Licht ist.

Ich habe mehrere Suchen durchgeführt, aber keine hat besonders erhellende Ergebnisse ergeben.

Answer 1

Also ich bin mir nicht ganz sicher, was Sie wollen, aber ich hoffe, das folgende Snippet wird helfen.

Anstatt viele konzentrische Kreise zu erstellen, erstellen Sie einen radialenGradient.
Dann können Sie diesen radialen Farbverlauf mit einigen Übergängen kombinieren, und sogar Filter, um den Effekt wie gewünscht zu modifizieren.

var img = new Image(); 
 
img.onload = init; 
 
img.src = "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg"; 
 
var ctx = c.getContext('2d'); 
 
var gradCtx = c.cloneNode().getContext('2d'); 
 
var w, h; 
 
var ratio; 
 

 
function init() { 
 
    w = c.width = gradCtx.canvas.width = img.width; 
 
    h = c.height = gradCtx.canvas.height = img.height; 
 
    draw(w/2, h/2) 
 
    updateGradient(); 
 
    c.onmousemove = throttle(handleMouseMove); 
 
} 
 

 
function updateGradient() { 
 
    var grad = gradCtx.createRadialGradient(w/2, h/2, w/8, w/2, h/2, 0); 
 
    grad.addColorStop(0, 'transparent'); 
 
    grad.addColorStop(1, 'white'); 
 
    gradCtx.fillStyle = grad; 
 
    gradCtx.filter = "blur(5px)"; 
 
    gradCtx.fillRect(0, 0, w, h); 
 
} 
 

 
function handleMouseMove(evt) { 
 
    var rect = c.getBoundingClientRect(); 
 
    var x = evt.clientX - rect.left; 
 
    var y = evt.clientY - rect.top; 
 
    draw(x, y); 
 
} 
 

 
function draw(x, y) { 
 
    ctx.clearRect(0, 0, w, h); 
 
    ctx.globalCompositeOperation = 'source-over'; 
 
    ctx.drawImage(img, 0, 0); 
 
    ctx.globalCompositeOperation = 'destination-in'; 
 
    ctx.drawImage(gradCtx.canvas, x - w/2, y - h/2); 
 
    ctx.globalCompositeOperation = 'lighten'; 
 
    ctx.fillRect(0, 0, w, h); 
 
} 
 

 
function throttle(callback) { 
 
    var active = false; // a simple flag 
 
    var evt; // to keep track of the last event 
 
    var handler = function() { // fired only when screen has refreshed 
 
    active = false; // release our flag 
 
    callback(evt); 
 
    } 
 
    return function handleEvent(e) { // the actual event handler 
 
    evt = e; // save our event at each call 
 
    if (!active) { // only if we weren't already doing it 
 
     active = true; // raise the flag 
 
     requestAnimationFrame(handler); // wait for next screen refresh 
 
    }; 
 
    } 
 
}

<canvas id="c"></canvas>