0
200
VistasGradiente radial concéntrico suave en CSS
Estoy tratando de crear una forma de dona borrosa como esta en un lienzo con js. Lo intenté
gradient.addColorStop(0, "rgba(0, 0, 0, .1)"); gradient.addColorStop(0.5, "rgba(128, 128, 128, .1)"); gradient.addColorStop(1, "rgba(0, 0, 0, .1)"); pero solo obtengo 
Tiene un círculo definido distinto en el radio de parada. Lo que quiero es una caída suave. Algo como esto..
es posible?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Parece que buscas un desenfoque gaussiano en lugar de un degradado.
Puede crear tal desenfoque usando la propiedad ctx.filter y pasar un valor de filtro CSS "blur(Npx)" .
Sin embargo, Safari todavía no es compatible con esta propiedad, por lo que para este navegador necesitamos usar una sombra como solución alternativa.
const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); if (ctx.filter === "none") { ctx.filter = "blur(60px)"; } else { // Safari still doesn't support ctx.filter... ctx.shadowColor = "#34aaff"; ctx.shadowBlur = 120; // x2 ctx.shadowOffsetX = 800; ctx.translate(-800, 0); // we draw the actual shape outside of the visible context } ctx.arc(400, 400, 200, 0, Math.PI*2); ctx.lineWidth = 125; ctx.strokeStyle = "#34aaff"; ctx.stroke(); <canvas width=800 height=800></canvas>
·
Juan Pablo Isaza
Denunciar
0
Puede intentar agregar una o más paradas de color para controlar la forma:
gradient.addColorStop(0, "White"); gradient.addColorStop(0.3, "rgba(128, 128, 256, .5)"); gradient.addColorStop(0.4, "rgba(128, 128, 256, .5)"); gradient.addColorStop(1, "White");
·
Juan Pablo Isaza
Denunciar
Responde la pregunta