Понедельник, 17 Июня 2013 10:48

Рисовалка на Canvas при помощи JavaScript

Written by 
Оцени эту запись
(9 Голоса)

Сделаем простую рисовалку на элементе HTML5 Canvas при помощи JavaScript. Это вторая статья серии изучения Canvas. Ранее мы уже рассматривали основные элементы Canvas - Canvas - первые шаги.

 

Для начала мы вставим элемент Canvas на нашу HTML страницу:

 

<canvas id="firststeps2" width="700" height="600" style="background:#ccc;"></canvas>

 

Самому элементу мы задаем размеры и идентификатор для связи с JavaScript.

 

Теперь мы будем работать с элементом при помощи скрипта.

 

<script>
    window.onload = function() {
        var canvasElem2 = document.getElementById('firststeps2');
 
        if (canvasElem2) {
 
            var firstSteps2 = canvasElem2.getContext('2d');
            canvasElem2.style.marginLeft = (document.body.offsetWidth - canvasElem2.offsetWidth)/2+'px';
 
        }
    }
</script>
 
 
Внутри данной функции мы опишем работу с элементом. Основная задача заключается в рисовании линии вслед за курсором пользователя. Решим мы ее через событие mousemove и будем использовать рисование линий на Canvas при помощи moveTo и lineTo.
 
 
firstSteps2.fillStyle = 'blueviolet';
firstSteps2.strokeStyle = 'blueviolet';
canvasElem2.addEventListener('mousemove', function(e){
                var x, y;
                x = e.pageX;
                y = e.pageY;
                setTimeout(function(){
                    firstSteps2.lineTo(x - canvasElem2.offsetLeft, y - canvasElem2.offsetTop);
                    firstSteps2.moveTo(x - canvasElem2.offsetLeft, y - canvasElem2.offsetTop);
                    firstSteps2.stroke();
 },1)
 });
 
Также на странице разместим пару кнопок для управления рисованием:
 
 
<div id="clear" style="width: 100px; height: 30px; position: fixed; right: 0; top: 0;">clear</div>   // очищает canvas
<div id="size" style="width: 100px; height: 30px; position: fixed; right: 0; top: 30px;"><input type="text" title="press Enter"></div>    // задает толщину линии
<div id="color" style="width: 100px; height: 30px; position: fixed; right: 0; top: 60px;"><input type="text" title="press Enter"></div>    // задает цвет линии
<div id="save" style="width: 100px; height: 30px; position: fixed; right: 0; top: 90px;">save</div>    //  сохраняет нарисованную картинку
<div id="bg" style="width: 100px; height: 30px; position: fixed; right: 0; top: 120px;">bg</div>    // задает фоновое изображение элемента
 
Работу этих кнопок опишем с помощью mousedown для кнопок и keyup для полей ввода.
 
 
 
document.getElementById('clear').addEventListener('mousedown', function(){
                firstSteps2.clearRect(0, 0, canvasElem2.width, canvasElem2.height);
                var w = canvasElem2.width;
                canvasElem2.width = 0;
                canvasElem2.width = w;
});
document.getElementById('size').addEventListener('keyup', function(){
                firstSteps2.lineWidth = this.getElementsByTagName('input')[0].value;
});
document.getElementById('color').addEventListener('keyup', function(){
                firstSteps2.strokeStyle = this.getElementsByTagName('input')[0].value;
});
document.getElementById('save').addEventListener('mousedown', function(){
                window.open(canvasElem2.toDataURL("image/png"), "new_window_name");
});
document.getElementById('bg').addEventListener('mousedown', function(){
                var backgroundImage = new Image();
                var bg = prompt('Введите путь к фоновому изображению', 'http://kate-land.net/images/stories/img10.jpg');
                backgroundImage.src = bg;
                firstSteps2.drawImage(backgroundImage, 0, 0);
                firstSteps2.fillRect(0, 0, firstSteps2.width, firstSteps2.height);
 
 });
 
 
 
Результат:
 
 
 
 
clear
save
bg
 
 
 
 
 
 
 
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов