25.06.14, 14:26
3 комментарий
  Скрипты

Доска для рисования на JS

Создадим доску для рисования для сайта на JS. Такая вещь будет полезной для сайта, где администратор хочет чтобы пользователь принял участие в дизайне и внес свои штрихи разнообразными рисунками. Для разработки нам понадобится несколько правил стилей, а всю часть работы будет выполнять JS.



Шаг 1. HTML

Разметка будет простая, нам необходимо указать размеры полотна, и выполнить вызов самой доски и ее элементов:

<div id="blackboard-frame">
<canvas id="blackboard" width="640" height="480"></canvas>
</div>



Как вы заметили ничего сложного нет. Со стилями все еще проще, у нас будет пару параметров контейнера, кроме этого мы используем два фона, заливка и рамка, для этого мы будем использовать сжатые рисунки с растровой графикой. Теперь перейдем к следующему шагу.


Шаг 2. JS

Нам необходимо определить параметры полотна, кроме этого добавляем функции, при помощи которого курсор при нажатии будет чертить по указанной плоскости, также добавляем стилизацию кисти и некоторые декорации на доске, такие как надписи:

var canvas, ctx;
var pimg, pattern;
var curr_color, dctrl;
function init() {
dctrl = { drawing: false };
canvas = document.getElementById("blackboard");
canvas.addEventListener("mousedown", canvas_mousedown);
canvas.addEventListener("mousemove", canvas_mousemove);
canvas.addEventListener("mouseout", canvas_mouseout);
canvas.addEventListener("mouseup", canvas_mouseup);
ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
ctx.lineCap = "round";
pattern = ctx.createPattern(pimg, "repeat");
curr_color = "#6FC";
var message = "JUST DRAW";
ctx.font = "bold 36px sans-serif";
ctx.textAlign = "center";
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = curr_color;
ctx.strokeText(message, 320, 40);
ctx.globalCompositeOperation = "destination-out";
ctx.strokeStyle = pattern;
ctx.strokeText(message, 320, 40);
}
function draw_line(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = curr_color;
ctx.stroke();
ctx.globalCompositeOperation = "destination-out";
ctx.strokeStyle = pattern;
ctx.stroke();
}
function draw_line_ev(ev) {
var rect = ev.target.getBoundingClientRect();
var mousex = ev.clientX - rect.left;
var mousey = ev.clientY - rect.top;
draw_line(dctrl.prevx, dctrl.prevy, mousex, mousey);
dctrl.prevx = mousex;
dctrl.prevy = mousey;
}
function canvas_mousedown(ev) {
var rect = ev.target.getBoundingClientRect();
dctrl.drawing = true;
draw_line();
dctrl.prevx = ev.clientX - rect.left;
dctrl.prevy = ev.clientY - rect.top;
}
function canvas_mousemove(ev) {
if(dctrl.drawing) {
draw_line_ev(ev);
}
}
function canvas_mouseout(ev) {
if(dctrl.drawing) {
draw_line_ev(ev);
}
dctrl.drawing = false;
}
function canvas_mouseup(ev) {
dctrl.drawing = false;
}
pimg = new Image();
pimg.onload = init;
pimg.src = "data:image/png;



Все достаточно просто, при этом мы получаем достойный пример который можно прикрутить к своему сайту.

Готово!

СКАЧАТЬ

Вес файла
86.14 Kb

Комментарии

  1. ghostjoker 26 июня 2014 00:35                    

    Демо бы посмотреть

  1. ToNik Пользователь offline 26 июня 2014 00:47                    

    ghostjoker,
    Нет ничего проще, чем скачать...
    Но если СИЛЬНО лень, то добавил демо

  1. ghostjoker 26 июня 2014 02:55                    

    Цитата: ToNik
    ghostjoker,
    Нет ничего проще, чем скачать...
    Но если СИЛЬНО лень, то добавил демо


    Благодарю за демку!

Напишите своё мнение