HTML5 canvas create outer glow effect of shape
I want to create an outer glow effect for arc shapes in my canvas tag. This is what it's supposed to look like:
So far I have the circles in white. I tried using a dropShadow that has an Offset of '0', but this doesn't look right.
What do you suggest? Maybe shapes underneath that have a gradient from blue to black? Thanks in advance!
Edit: Finally got it wor开发者_JS百科king. Used a for loop to draw circles with different radius and alpha.
You can create outer glow using shadow like this:
context.shadowBlur = 10;
context.shadowColor = "black";
Take a look at this link for an example: http://www.williammalone.com/articles/html5-canvas-example/
And here's a really basic JSFiddle.
I think this will be faster than "a for loop to draw circles with different radius and alpha."
I hope this can help!
A shadow with 0 offset, a big blur radius and a "light" shadow color basically looks like a glow. I needed to put a green "glow" on an arbitrary filled path, and my code looked like this:
<!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>
If you just replace my line-y geometry with your circle arcs, you'll be able to create that effect without image files.
Are the circles image files? If so, create image files with glow applied to them within photoshop, GIMP, etc. Save them as .PNG to preserve the transparency of the background.
If they are drawn on the screen with canvas drawing functions, then how about redrawing the circle 25 times, each circle getting one pixel thicker in width?
I was curious to figure out the best solution to this problem as I'm trying to do something similar and it's still the top answer on Google. It turns out that, for canvas on a black background, unless you want a white glow you're better off drawing it manually rather than using shadowBlur as the result is too dark.
So here is the code, result and JSFIddle for the solution I came up with which I imagine is something similar to the accepted answer. It works by using the same alpha value but changing the thickness of the line which has an additive effect. Note the use of lineCap which will also add glow to the ends of the lines.
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)
The loop is the solution, indeed, but without playing the radius and the alpha. Simple set the linewidth thick and the shadow with zero offsets and decent blur, then draw the arcs in a loop of... some... like with 10 it will shine.
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();
}
加载中,请稍侯......
精彩评论