实现这一点的一种方法是使用blend((和blendMode；
所以我有一个div，我希望它首先被一块黑色画布覆盖，然后在移动鼠标时清除椭圆形状的黑色，以显示div内容。我只是用单个像素，但不是用椭圆的形状。帮助
<div id="mainContent">
<div> <img id="mainImage" src="tmpfiles/lpz2.jpg"></div>
</div>
我的素描.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;
}
blendMode(REMOVE)，特别是因为它是
以A、的阿尔法强度从B中删除像素
其中B是已经显示的像素(画布的黑色背景(，A为源像素(绘制的形状(
你可以创建一个透明的遮罩层来绘制，并使用一种具有一定alpha值的颜色(在你的情况下是完全实心的(来制作你想要的形状；然后使用以掩模层为源、以REMOVE为混合模式的blend方法，如下所示：
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>