Здравствуйте! Это что-то вроде перевода вот этой статьи, однако текст там я не особо читал. Читал код, поэтому первоначальный код взят оттуда и немного подкорректирован и добавлены русские комментарии. Сегодня мы с вами будем делать свой простой Paint для веб-страницы. Я его делал в одном из своих маленьких хобби-проектов, но потом убрал этот функционал, однако написать о том, как это сделать все же стоит. Итак, приступим.
Первое, что мы сделаем - это опишем наш html файл.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<script type = "text/javascript" src = "paint.js"></script>
<title>Рисовалка</title>
<style type="text/css">
#wrapper { position: relative; }
#tablet { border: 1px solid #111; }
</style>
</head>
<body>
<div id = "wrapper">
<canvas id = "tablet" width = "500" height = "400"></canvas>
</div>
</body>
</html>Теперь создадим файл paint.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);
}
// Здесь мы будем ловить движения мыши
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); }Теперь пояснения. Функция init() инициализирует все необходимое, а именно мы слушаем события mousedown, mousemove, mouseup. Остальное итак прокомментировано. В следующей части мы научим наш скрипт рисовать прямые линий, прямоугольники, а также делать очистку холста.
На этом пока все. Спасибо за внимание!