Задача:
- создать холст canvas с возможностью свободного рисования на нем "карандашом",
- с возможностью полной отмены нарисованного (очисткой холста)
- с возможностью отмены последнего действия (последней линии, нарисованной "карандашом").
Статус выполнения: выполнено частично. Создан холст, работает "карандаш", работает полная очистка холста. Не получается написать механизм отмены последнего действия ''карандаша", последней проведенной кривой.
Причина сбоя: не хватает данных из-за недостаточного личного опыта работы с canvas. Гугление ТОП-30 к явному ответу также не привело.
Запрос: помощь и/или совет по решению задачи отмены последнего действия "карандаша".
Плюс, ответ на этот вопрос заполнит в Сети информационный пробел для будущих разработчиков.
Текущий код JS:
if(window.addEventListener) {
window.addEventListener('load', function () {
var canvas, context, tool;
function init () {
// Находим canvas элемент
canvas = document.getElementById('tablet');
if (!canvas) {
alert('Ошибка! Canvas элемент не найден!');
return;
}
if (!canvas.getContext) {
alert('Ошибка: canvas.getContext не существует!');
return;
}
// Получаем 2D canvas context.
context = canvas.getContext('2d');
if (!context) {
alert('Ошибка: getContext! не существует');
return;
}
tool = new tool_pencil();
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
}
// Очистка всего нарисованного на поле
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, tablet.width, tablet.height);
}, false);
// Здесь мы будем ловить движения мыши
function tool_pencil () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
// Эта функция вызывается каждый раз, когда вы перемещаете мышь.
// Но рисование происходит только когда вы удерживаете кнопку мыши
// нажатой.
this.mousemove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
// Событие при отпускании мыши
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
}
};
}
// Эта функция определяет позицию курсора относительно холста
function ev_canvas (ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Вызываем обработчик события tool
var func = tool[ev.type];
if (func) {
func(ev);
}
}
init();
}, false); }
И очевидный тег в HTML:
<canvas id = "tablet" width="1050" height="900"></canvas>
<button id="clear">Очистка всего холста</button>
Простой