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>