HTML5 toile créer l'effet de lueur extérieure de la forme
je veux créer un effet de lueur externe pour les formes d'arc dans mon étiquette de toile.
C'est ce qu'il est censé ressembler à:
Jusqu'à présent j'ai les cercles en blanc. J'ai essayé d'utiliser un dropShadow qui a un décalage de '0', mais cela ne semble pas juste.
que suggérez-vous? Peut-être des formes en dessous qui ont un gradient du bleu au noir? Merci à l'avance!
Edit: a Finalement obtenu ce travail. Utilisé une boucle pour dessiner des cercles avec un rayon différent et alpha.
5 réponses
les cercles sont-ils des fichiers d'images? Si c'est le cas, créez des fichiers image avec glow appliqué à eux dans photoshop, GIMP, etc. Enregistrer en tant que .PNG pour préserver la transparence de l'arrière-plan.
si elles sont dessinées sur l'écran avec des fonctions de dessin sur toile, alors pourquoi ne pas redessiner le cercle 25 fois, chaque cercle obtenant un pixel plus épais en largeur?
Vous pouvez créer lueur externe à l'aide de l'ombre comme ceci:
context.shadowBlur = 10;
context.shadowColor = "black";
regardez ce lien pour un exemple: http://www.williammalone.com/articles/html5-canvas-example/
Et ici est vraiment de base JSFiddle.
je pense que ce sera plus rapide que " a pour boucle pour dessiner des cercles avec un rayon différent et alpha."
j'espère que cela peut vous aider!
une ombre avec 0 décalage, un grand rayon de flou et une couleur d'ombre "légère" ressemble fondamentalement à une lueur. J'avais besoin de mettre un "glow" vert sur un chemin rempli arbitrairement, et mon code ressemblait à ceci:
<!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>
si vous remplacez juste ma géométrie de ligne-y par vos arcs de cercle, vous serez en mesure de créer cet effet sans fichiers image.
La boucle est la solution, en effet, mais sans jouer le rayon et l'alpha. Simple régler l'épaisseur de la ligne et l'ombre avec zéro offsets et flou décent, puis tirer les arcs dans une boucle de... quelque... comme avec 10 il brillera.
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();
}
j'étais curieux de trouver la meilleure solution à ce problème car j'essaie de faire quelque chose de similaire et c'est toujours la meilleure réponse sur Google. Il s'avère que, pour une toile sur un fond noir, à moins que vous ne vouliez une lueur blanche, vous feriez mieux de la dessiner manuellement plutôt que d'utiliser shadowBlur car le résultat est trop sombre.
voici donc le code, le résultat et JSFIddle pour la solution que j'ai trouvée et qui, je l'imagine, ressemble à la réponse acceptée. Il fonctionne en utilisant la même valeur alpha, mais en changeant l'épaisseur de la ligne qui a un effet additif. Notez l'utilisation de lineCap qui ajoutera aussi de la lueur aux extrémités des lignes.
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)
