Canvas Complete Drawing

Question

저는 새로운 proyect =를 개발했습니다. html5에서는 draw 요소에 캔버스를 사용합니다.

저는 6 가지 캔버스를 html로 가지고 있는데, 사용자가 캔버스를 그릴 때 알아야하고 각 캔버스의 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; 

는, 그 크기는 (I 하드 이미지의 크기를 코딩), 그들은 "상처"되었는지 여부에 대한 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 %가있는 경우에만 메시지를 표시 할 수 있습니다. 또한 영역을 단지 줄무늬가 아닌 2D 격자로 만들면 더 정확하게 만들 수 있습니다.

질문이 있으시면 언제든지 물어보십시오.

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