0
152
VistasLienzo difuminado de opacidad 1 a 0 en los bordes
Estoy creando un lienzo con una imagen dentro usando
context.drawImage(image, (cWidth - iRatio)/2, 0, iRatio, cHeight);Y detrás del lienzo hay un fondo de pantalla azul dentro de un div.
Como puede ver en la imagen (hecha en Photoshop), el Lienzo (Imagen con el Sol) se está desvaneciendo de la opacidad 1 a 0.
¿Cómo puedo hacerlo en Canvas con JS o CSS? Quiero que los bordes del lienzo (todos, es decir, izquierdo, derecho, superior e inferior) tengan una opacidad 0 y se desvanezcan hacia el centro con una opacidad 1.
2 Respuestas
Responde la pregunta0
Puedes usar mask :
img { mask:radial-gradient(circle, white 30%, transparent 60%); } <img src="https://i.stack.imgur.com/Onn3y.png" />MDN tiene muchos ejemplos: puede usar degradados, svg e incluso png para obtener el efecto que desea.
También hay mask-border pero no es tan compatible (por ejemplo, Firefox aún no lo admite).
0
Usando filtro
Use ctx.filter para crear un desenfoque y use ese desenfoque para mantener los píxeles que desea y elimine los píxeles del borde usando ctx.globalCompoiteOperation = "detination-in"
El siguiente ejemplo utiliza la función featherEdge bordes del contenido del lienzo.
const ctx = canvas.getContext("2d"); const img = new Image; img.src = "https://i.stack.imgur.com/Onn3y.png"; img.addEventListener("load", draw, {once: true}); function draw() { ctx.drawImage(img, 0, 0); featherEdge(20, 2); } function featherEdge(blurRadius, inset) { ctx.filter = "blur(" + blurRadius + "px)"; ctx.globalCompositeOperation = "destination-in"; const inBy = blurRadius + inset; ctx.fillRect(inBy, inBy, canvas.width - inBy * 2, canvas.height - inBy * 2); } canvas { background: cyan; } <canvas id="canvas" width="200" height="200"></canvas>