p5 在鼠标移动时显示 div

Question

所以我有一个 div，我希望它首先被黑色画布覆盖，然后当我移动鼠标时，清除带有椭圆形状的黑色以显示 div 内容。 我只是让它使用单个像素而不是椭圆形。 帮助

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

我的 Sketch.js

function setup(){
  var canvas = createCanvas(100,100);
  canvas.id("sketch-container")
  canvas.parent("mainContent");
  background(0);

}
function draw(){
  var transparent = color("#1C00ff00")
  var x = mouseX;
  var y = mouseY;
  set(x,y,transparent);
  updatePixels();
}

我的 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;
}

Answer 1

实现这一点的一种方法是使用blend()和blendMode ； blendMode(REMOVE)特别是因为它

使用 A 的 alpha 强度从 B 中删除像素，

其中B是已经显示的像素（画布的黑色背景）， A是源像素（绘制的形状）

您可以创建一个透明的蒙版图层来绘制并使用具有一些 alpha 值的颜色（在您的情况下是完全实心的）来制作您想要的形状； 然后使用blend方法，将蒙版层作为源， REMOVE作为混合模式，如下所示：

 let maskCanvas function setup(){ var canvas = createCanvas(100,100); canvas.id("sketch-container") canvas.parent("mainContent"); background(0); maskCanvas = createGraphics(100, 100) } function draw(){ maskCanvas.fill('red') // Any color will do maskCanvas.ellipse(mouseX, mouseY, 10, 5) blend(maskCanvas, 0, 0, 100, 100, 0, 0, 100, 100, REMOVE); }

 /*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; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script> <div id="mainContent"> <div> <img id="mainImage" src="https://picsum.photos/200"></div> </div>