javascript - 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()和 blendMode ; blendMode(REMOVE) 特别是因为它

removes pixels from B with the alpha strength of A,

其中 B 是已显示的像素( Canvas 的黑色背景)，A 是源像素(绘制的形状)

您可以create一个透明的 mask 层，用于绘制并使用具有一定 alpha 值的颜色(在您的情况下完全是实心的)来制作您想要的形状；然后使用 blend 方法，将 mask 层作为源，将 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>