Понедельник, 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

Комментарии  

 
+1 #3 vampireos 19.03.2014 16:12
только один вопрос, почему не используешь песочницы для показа своего наглядного творения?)
codepen.io cssdeck.com jsbin.com jsfiddle.net
..............................................
vk.com/vampireos
Цитировать
 
 
0 #2 kat-khmara 02.07.2013 07:26
Спасибо!
Цитировать
 
 
0 #1 аноним 01.07.2013 20:55
Прикольно! :-)
Цитировать
 

Добавить комментарий


Защитный код
Обновить

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