Me gustaría desenfocar los bordes de los agujeros creados por los clics del mouse. Este es mi ejemplo. Ahora he usado g.js para crear diferencias de dos formas (círculos y un rectángulo), y luego me gustaría desenfocar los bordes de estos agujeros en el rectángulo. fliter(BLUR) , pero el efecto no fue el ideal porque desenfocará tanto los agujeros como los mapas debajo. Solo quiero desenfocar el rectángulo con agujeros. ¿Hay alguna manera de hacerlo?
var e2 = []; var light = []; var img; var pg; var pgPos = []; function preload() { img = loadImage("https://2328a0b8-e236-4076-9848-a3275ab1c3e3.id.repl.co/map%20test.jpg"); } function setup() { createCanvas(600, 600); background(100, 100, 100); pg = createGraphics(600, 600); } function mouseClicked() { push(); let e = g.ellipse({ x: mouseX, y: mouseY }, 100, 100); e2.push(e); pop(); light.push(createVector(mouseX, mouseY)); pgPos.push(createVector(mouseX, mouseY)); } function draw() { image(img, 0, 0); push(); var e1 = g.rect({ x: width / 2, y: height / 2 }, width, height); let pathD = g.compound(e1, e2, 'difference'); pathD.fill = "rgb(30, 30, 30)"; pathD.draw(drawingContext); pop(); for (i = 0; i < light.length; i++) { noStroke(); fill(255, 255, 102); circle(light[i].x, light[i].y, 30); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdn.rawgit.com/nodebox/g.js/master/dist/g.min.js"></script>La función p5.js filter() parece aplicarse al contenido actual del lienzo (y también es muy lenta). Sin embargo, puede usar la propiedad CanvasRenderingContext2D.filter nativa para lograr el efecto que desea:
drawingContext.filter = 'blur(20px)'; // draw things you want to be blurred drawingContext.filter = 'none'; var e2 = []; var light = []; var img; var pg; var pgPos = []; function preload() { img = loadImage("https://2328a0b8-e236-4076-9848-a3275ab1c3e3.id.repl.co/map%20test.jpg"); } function setup() { createCanvas(600, 600); background(100, 100, 100); pg = createGraphics(600, 600); } function mouseClicked() { push(); let e = g.ellipse({ x: mouseX, y: mouseY }, 100, 100); e2.push(e); pop(); light.push(createVector(mouseX, mouseY)); pgPos.push(createVector(mouseX, mouseY)); } function draw() { image(img, 0, 0); push(); drawingContext.filter = 'blur(20px)'; var e1 = g.rect({ x: width / 2, y: height / 2 }, width, height); let pathD = g.compound(e1, e2, 'difference'); pathD.fill = "rgb(30, 30, 30)"; pathD.draw(drawingContext); drawingContext.filter = 'none'; pop(); for (i = 0; i < light.length; i++) { noStroke(); fill(255, 255, 102); circle(light[i].x, light[i].y, 30); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdn.rawgit.com/nodebox/g.js/master/dist/g.min.js"></script>