Сценарирование конкретной реализации Canvas clearRect?

Question

помощь по созданию скриптов, необходимых для этого конкретного URL: http://jsfiddle.net/ezanker/4hfkb/6/

Просто, я пытаюсь создать скрипт функции clearCanvas с помощью функции clearRect. Может ли кто-нибудь дать мне знать, как это сделать?

То, что я думаю, что те фрагменты, необходимые для сценария это следующим образом, но я не знаю, как область JavaScript получает решен в веб-страницы для того, чтобы очистить Canvas1:

HTML:

<a href="#canvas1">clearCanvas</a> 

JavaScript:

function clearCanvas() {    
      context.clearRect(0, 0, canvas.width, canvas.height); 
     } 

Любого скриптовое решение, которое должным образом «работает» на сайте JSFIDDLE - и очищает рисунок на площади холста - был бы весьма признателен д. Спасибо!

Answer 1

Если вы просто хотите очистить любой холст, вы должны получить холст, а затем получить 2d контекст этого холста перед вызовом ClearRect:

function clearCanvas() { 
    var canvas = $('#canvas1')[0]; 
    var context = canvas.getContext('2d'); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
} 

В этом конкретном FIDDLE, я был с помощью sketch.js, чтобы рисовать на cnavas. Плагин предоставляет функцию ластика, которая не требует скрипта (см. http://intridea.github.io/sketch.js/). Просто добавьте эту разметку:

<div class="tools"> 
    <a href="#canvas1" data-tool="marker" data-role="button" data-inline="true">Marker</a> 
    <a href="#canvas1" data-tool="eraser" data-role="button" data-inline="true">Eraser</a> 
</div> 
<canvas id="canvas1" ></canvas> 

Нажмите на кнопку маркера, чтобы нарисовать и нажмите кнопку Eraser для очистки.

Обновлено FIDDLE

Answer 2

Добавьте ниже функции в Sketch основной функции.

Sketch.prototype.clear = function() { 
    this.actions = []; 
    return this.redraw(); 
}; 

Чтобы очистить canvas

$("#canvas").sketch("clear"); 

Demo

Answer 3

Благодарим Вас за эти усилия в области развития по очистке площади холста! Эти решения при фактическом тестировании устройства на Apple ios7, похоже, не работают на 100%. Хотя эти решения эффективно стирают полотно, они не работают должным образом с историей чертежа. Этот новый FIDDLE приближается к предпочтительному решению из-за признанием проблемы с историей рисования:

http://jsfiddle.net/4hfkb/18/

Разница заключается в JavaScript в нижней части/конце существующего сценария. Любой способ, которым история чертежа может быть принята во внимание, чтобы получить 100% -ное решение? Необходимы ли дополнительные слушатели, чтобы полностью компенсировать функцию клиринга? В противном случае этот очень классный эскиз имеет большой потенциал ios7. Хотелось бы увидеть эту 100% -ную функциональность, если это возможно, и поддерживать отличное решение проблем!

[1]: http://jsfiddle.net/4hfkb/18/