极客观点
项目管理
HarmonyOS
蒙层我能擦除掉，但是想把蒙层换成图片，怎么擦都没有用了。求大神改下，只是想擦个图片，漏出另一个图片。
CSS
<style>
*{
padding: 0;
margin: 0;
}
.wrap {
width:250px;
height: 166px;
position: relative;
top: 50px;
left: 50px;
}
.wrap img{
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.wrap canvas{
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
</style><script>
window.onload = function(){
var myCanvas = document.getElementById("myCanvas");
var oCon = document.getElementById("con");
var gray = myCanvas.getContext("2d");
gray.beginPath(); //起始一条路径
gray.fillStyle = "#999";
gray.fillRect(0,0,250,166); //绘制矩形 x轴距 y轴距 width height
gray.closePath(); //创建从当前点回到起始点的路径
// var img = new Image();
// img.src = "blue.jpg";
// oCon.appendChild(img);
// img.onload = function(){
// gray.drawImage(img,0,0);
// }
gray.globalCompositeOperation = "destination-out";
myCanvas.addEventListener("touchstart",function(e){
myCanvas.addEventListener("touchmove",function(e){
e.preventDefault();
var num = 0;
var x = e.targetTouches[0].clientX + document.body.scrollLeft - oCon.offsetLeft;
var y = e.targetTouches[0].clientY + document.body.scrollTop - oCon.offsetTop;
var dataArea = gray.getImageData(0,0,250,166);
gray.beginPath();
gray.fillStyle = "#f00"; //设定要填充的颜色
gray.arc(x,y,20,0,Math.PI*2)
gray.fill(); //开始填充颜色
gray.closePath();
for (var i = 0; i < dataArea.data.length; i++) {
if (dataArea.data[i] == 0) {
num ++;
};
};
if (num >= dataArea.data.length * 0.5) {
gray.fillRect(0,0,250,166);
};
})
});
}
</script><body>
<div id="con" class="wrap">
<!-- <img src="blue.jpg" width="250" height="166" id="bg"> -->
<canvas id="myCanvas" width="250" height="166"></canvas>
</div>
</body>
html5
你可以试试：
globalCompositeOperation组合多个图形参考：http://w3school.com.cn/tags/canvas_globalcompositeoperation.asp
实例：http://w3school.com.cn/tiy/t.asp?f=html5_canvas_globalcompop_all
不过他还漏了个darker，跟lighter相对。