HTML5 Canvas. Рисование мышкой. Часть 1

Дата публикации:4 мая 2013 г. 18:53:35

Здравствуйте! Это что-то вроде перевода вот этой статьи, однако текст там я не особо читал. Читал код, поэтому первоначальный код взят оттуда и немного подкорректирован и добавлены русские комментарии. Сегодня мы с вами будем делать свой простой 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. Остальное итак прокомментировано. В следующей части мы научим наш скрипт рисовать прямые линий, прямоугольники, а также делать очистку холста.

На этом пока все. Спасибо за внимание!

Метки:html, html5, js, javascript, canvas