Холст Полный рисунок

Question

я разрабатываю новый проект =, он находится в html5 с использованием холста для элементов рисования.

У меня есть 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;

В конструкторе я инициализирую некоторые переменные, такие как количество зон, их размеры (я жестко закодировал размерваши изображения), массив 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, а затем посчитай, сколько из них правда.Если больше половины, я показываю сообщение.

Живой пример

Вместо этого вы можете захотеть показывать сообщение только тогда, когда у вас 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');