p5 在鼠标移动时显示 div

Question

所以我有一个 div 我希望它首先被黑色覆盖 canvas 然后当我移动鼠标时清除椭圆形的黑色以便显示 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() and blendMode； blendMode(REMOVE) 特别是因为

removes pixels from B with the alpha strength of A,

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

您可以 create 一个透明遮罩层来绘制并使用具有一些 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>

p5 在鼠标移动时显示 div

p5 show div as mouse moves

javascript

p5.js