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');