Canvas Complete Drawing

Question

我开发了一个新的proyect =，它在html5中使用画布绘制元素。

我在html中有6个不同的画布，我必须知道用户何时在画布上绘制并绘制每个画布的至少50％，并在用户在所有画布上绘制时触发事件！

这是我的代码：http://jsfiddle.net/xtJZ3/

在此先感谢。

Answer 1

准确计算图像的50％被“划伤”时，计算确实很困难且效率低下。相反，你可以做的是通过将图像分成“区域”来作弊。在这个例子中，我将你的图像分成16个竖条。无论用户何时点击进入某个区域，我们都会将其标记为“划痕”。然后我们检查是否有8个以上的区域被划伤，如果是的话，做一些事情。

var zoneNumber = 16; 
var zoneSize = 250/zoneNumber; 
var zones = []; 
for(var i = 0; i < zoneNumber; i++) 
    zones.push(false); 
var done = false; 

在我初始化一些变量，如区域数量的构造，它们的大小（我硬编码的图像的大小），中false对于是否已经被“划伤”的阵列和变量，表示是否我们已经报道过图像被划伤。

var zone = Math.floor(x/zoneSize); 
zones[zone] = true; 
for(var i = 0, z = 0; i < zones.length; i++) { 
    if (zones[i]) 
     z++; 
    if (z >= zoneNumber/2 && !done) { 
     done = true; 
     var p = document.createElement("p"); 
     p.innerHTML = "scratched"; 
     document.getElementById("main").appendChild(p); 
    } 
} 

然后，在您的暂存功能中，我使用基本的数学运算来确定用户正在点击哪个区域。我将它设置为true，然后计算有多少是正确的。如果超过一半，我会显示消息。

Live example

你可以代替希望当你有划伤的事情，这将是在我看来，更好的75％，只显示消息。您也可以通过将区域设置为二维网格而不是仅仅条纹来使其更加准确。

如果您有任何疑问，请不要犹豫，问。

Answer 2

你可以指望在canvas.draw非透明像素：

var pixels = canvas.draw.getContext('2d').getImageData(0, 0, canvas.draw.width, canvas.draw.height).data; 
var count = 0; 
for (var i = 3; i < pixels.length; i += 4) 
    if (pixels[i]) count++; 
if (count > pixels.length/4/2) alert('done');