Несколько областей щелчка на холсте HTML5? - PullRequest
0 голосов
/ 26 октября 2011

Я бездельничаю с HTML5 canvas и clipping.Мне интересно, как я могу заставить пользователя щелкнуть на холсте, сделать так, чтобы он обрезал круг, а затем повторить.По сути, пользователь может щелкнуть несколько раз, и будет несколько клипов.

Я пробовал пару решений, которые были немного похожи на то, что я хочу, но это не работает.

Воткод отсечения:

context.save();

context.beginPath();
context.arc(mouseX,mouseY,50,50,Math.PI*2,true);
context.globalCompositeOperation = 'destination-out';
context.clip();
context.closePath(); 
var img = new Image();
img.src = canvasSnowflake.toDataURL();

context.drawImage(canvasSnowflake, 0, 0);

context.restore();

вы можете просмотреть всю вещь в действии здесь: http://jsfiddle.net/cnbishop/8FzuB/. прямо сейчас вы можете нажать один раз, и клип сработает, но вы можете получить новый клип, если вынажмите на холст снова.Это вообще возможно?

1 Ответ

0 голосов
/ 26 октября 2011

Каждый раз, когда пользователь обрезает клип, вам нужно каким-то образом сохранить это действие в JS. В следующий раз, когда пользователь щелкнет, вы извлекаете предыдущую вырезку, применяете ее, а затем применяете новое действие клипа.

По сути, вам необходимо повторно применить все действия обрезки в истории в том же порядке, в котором они были выполнены, поскольку Canvas не может "запомнить" свой предыдущий рендеринг.

Правильно ли я истолковал ваш вопрос?

...