Javascript Paint с использованием Canvas

Итак, для того, чтобы сделать графический редактор нужны:
  • Базовые знания HTML5, JS
  • Браузер
  • Canvas
Создаем объекты:
1
2
3
4
<canvas id='canvas' width="700" height="500">Ваш браузер устарел!</canvas>
<div id="palette"></div>
<div id="clear">Очистить изображение</div>
<div id="save">Сохранить изображение</div>
canvas (холст) - для рисования на нем palette - палитра clear и save - для очистки контекста и сохранения изображения Оформим стили:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*
    Кнопка цвета, для выбора на палитре
*/
.button
{
    width:15px;
    height:15px;
    display:inline-block;
    padding:1px;
    border:solid 1px #fff
}
.button:hover
{
    border:solid 1px #f00
}
.button:active
{
    border:solid 1px #ff0
}
#palette, #canvas{
    display:inline-block;
    border:solid 1px #aaa;
    cursor:default;
    vertical-align: top;
}
#save,#clear{
    background:#eee;
    color:#777;
    padding:10px;
    width:200px;
    text-align: center;
    margin: 15px auto;
}
Собственно приступаем к реализации:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
//Инициализируем переменные
var palette=document.getElementById("palette");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//Точки текущего положения курсора и предыдущего
//для рисования линия от и до
var currentPoint={x:0, y:0},
    previousPoint={x:0, y:0}
//флаг, указывающий зажата-ли кнопка мыши
var isMousePressed = false;
//цвет по-умолчанию
var color = "#FFFF00";
  
//вешаем обработчики на кнопки
$("#clear").click(clear);
$("#save").click(save);
  
//переменные для рисования
context.lineCap="round";
context.lineWidth = 8;
  
//генерируем палитру
//в итоге 5^3 цветов = 125
for(var r=0, max=4; r<=max; r++){
    for(var g=0; g<=max; g++){
        for(var b=0; b<=max; b++){
            palette.innerHTML+="<div class='button' onclick='setColor(this)' style='background:rgb("+
                    Math.round(r*255/max)+", "+
                    Math.round(g*255/max)+", "+
                    Math.round(b*255/max)+")'></div>";
        }
        palette.innerHTML+="<br>";
    }
      
}
//функция рисования линии
function draw() {
    //рисует только если зажата кнопка
    if (isMousePressed) {
        context.beginPath();
        context.strokeStyle = color;
        context.moveTo(previousPoint.x, previousPoint.y);
        context.lineTo(currentPoint.x, currentPoint.y);
        context.stroke();
        context.closePath();
    }
    //обновить переменную предыдущего положения курсора
    previousPoint={x:currentPoint.x, y:currentPoint.y};
}
//срабатывает при клике на цвет в палитре
function setColor(objColor){
    color=objColor.style.backgroundColor;
}
canvas.onmousedown=function(){
    console.log(e);
    setCoords(event.offsetX,event.offsetY)
    draw();
    isMousePressed = true;
}
document.body.onmouseup=function(){
    isMousePressed = false;
}
canvas.onmousemove=function(){
    setCoords(event.offsetX,event.offsetY)
    if(isMousePressed)
        draw();
}
function save(){
    window.open(canvas.toDataURL('image/png'), 'new_window');
}
function clear(){
    context.clearRect(0,0,canvas.width, canvas.height);
}
function setCoords(x,y){
    currentPoint={x:x, y:y};
}
Ваш браузер устарел!
Очистить изображение
Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru