求助：用p5.js实现鼠标拖动时以椭圆清除Canvas遮罩显示Div内容

我来帮你搞定这个椭圆清除遮罩的问题～你之前的代码用set(x,y,transparent)只能修改单个像素，所以只能实现点清除的效果。我们可以利用p5.js的混合模式来实现区域清除，下面是修改后的完整方案：

修改后的完整代码 #

HTML（无需改动） #

<div id="mainContent"> 
 <div> 
 <img id="mainImage" src="tmpfiles/lpz2.jpg"></div> 
</div>

CSS（无需改动） #

/*main content */ 
#mainContent{ 
 /* background: #000000; */ 
 height: 100vh; 
 position: relative; 
 overflow: hidden; 
} 
#sketch-container{ 
 position: absolute; 
 width: 100% !important; 
 height: auto !important; 
} 
#mainImage{ 
 width: 100%; 
 height: auto; 
 position: absolute; 
}

sketch.js（核心修改） #

function setup(){ 
  // 获取mainContent的实际宽高，让画布完全覆盖内容
  const content = document.getElementById('mainContent');
  const w = content.offsetWidth;
  const h = content.offsetHeight;
  
  var canvas = createCanvas(w, h); 
  canvas.id("sketch-container") 
  canvas.parent("mainContent"); 
  background(0); // 初始黑色遮罩
} 

function draw(){ 
  // 只在鼠标移动且在画布范围内时执行清除
  if(mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height){
    blendMode(REMOVE); // 设置混合模式为"清除"
    noStroke(); // 去掉椭圆边框
    fill(0); // 填充颜色不影响，REMOVE模式下只要绘制就会清除
    ellipse(mouseX, mouseY, 80, 60); // 绘制椭圆，参数：x,y,宽半径,高半径
    blendMode(BLEND); // 恢复默认混合模式，避免影响后续操作
  }
}

关键改动说明 #

• 画布尺寸匹配：在setup中获取#mainContent的宽高来创建画布，确保遮罩能完全覆盖下方的图片内容。
• 混合模式REMOVE：这个模式会让后续绘制的图形区域直接清除画布上的像素，正好实现“擦除”黑色遮罩的效果。
• 椭圆绘制：用ellipse()函数绘制椭圆，你可以调整最后两个参数（80和60）来改变椭圆的大小和比例，比如改成100,100就是圆形清除。
• 鼠标范围判断：增加了鼠标在画布内的判断，避免鼠标移出画布时出现异常。

这样修改后，当你移动鼠标时，鼠标位置就会以椭圆形状清除黑色遮罩，显示出下方的图片内容啦～

内容的提问来源于stack exchange，提问作者cshjsc