画布透明蒙版效果百分比蒙版 [英] Canvas transparency mask effect percentage masked
问题描述
我在隐藏下面内容的页面上叠加了画布。然后在mousemove上使用我清除图像叠加层以显示下面的内容，好像它正在被擦掉一样。
I've overlayed a canvas on a page hiding the content underneath. Then using on mousemove I clear the image overlay to reveal the content underneath as if it is being wiped off.
我添加了一个定时器事件，它每秒调用一个函数。
I have added a timer event which calls a function every second.
我正在努力的是如何使用此功能来检测已清除的百分比。所以我们可以在超过75％的画布被清除时触发一个函数。
What I am struggling with is how can I use this function to detect what percentage has been cleared. So we can trigger a function when say more than 75% of the canvas has been cleared.
这是一个jsfiddle https://jsfiddle.net/barrydowd/phgos32w/1/
Here is a jsfiddle https://jsfiddle.net/barrydowd/phgos32w/1/
这是代码
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<style>
p {position:absolute;top:0px;left:0px;width:400px;height:300px;}
#c {position:absolute;top:0px;left:0px; cursor: url(http://findicons.com/files/icons/2232/wireframe_mono/48/cursor_arrow.png), auto;}
</style>
<script type="text/javascript">
var ctx = "";
var img = "";
function get_cleared() {
//DO SOMETHING HERE TO GET THE PERCETAGE OF CANVAS CLEARED
}
function init() {
var int=self.setInterval(function(){get_cleared()},1000);
var canvas = document.getElementById('c');
ctx = canvas.getContext('2d');
img = document.createElement('IMG');
img.onload = function () {
ctx.beginPath();
ctx.drawImage(img, 0, 0);
ctx.closePath();
ctx.globalCompositeOperation = 'destination-out';
}
img.src = "http://dl.dropbox.com/u/12501653/FROST.png";
function drawPoint(pointX,pointY){
var grd = ctx.createRadialGradient(pointX, pointY, 0, pointX, pointY, 50);
grd.addColorStop(0, "rgba(255,255,255,0.6)");
grd.addColorStop(1, "transparent");
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(pointX,pointY,50,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();
}
canvas.addEventListener('touchstart',function(e){
drawPoint(e.touches[0].screenX,e.touches[0].screenY);
},false);
canvas.addEventListener('touchmove',function(e){
e.preventDefault();
drawPoint(e.touches[0].screenX,e.touches[0].screenY);
},false);
canvas.addEventListener('mousemove',function(e){
e.preventDefault();
drawPoint(e.clientX,e.clientY);
},false);
}
</script>
</head>
<body onLoad="javascript:init();">
<div>
<p>testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... </p>
<canvas id="c" width="400" height="400"></canvas>
</div>
</body>
推荐答案
var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var trans = 0;
for (var i = 0; i < imageData.data.length; i += 4) {
if (imageData.data[3 + i] === 0) {
trans++
}
}
var percent = trans / (imageData.data.length / 4) * 100;
但是不要在setInterval中执行它，getImageData很慢并且内存耗尽！
But don't do it in a setInterval, getImageData is slow and memory consumptive!
至少，只能在限制鼠标移动事件。
更好的方法是在这些评论但我仍然没有时间写它..
如果有人想这样做，我很乐意使用它; - ）
A better way would be as in these comments but I still didn't had time to write it..
If anyone wants to do it, I'd be glad to use it ;-)
这篇关于画布透明蒙版效果百分比蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
