Рисование мышью на канве с помощью JavaScript

Выполняется легко, как и многое другое на этом замечательном языке.

Ниже показан пример на создание простейшей рисовалки, только не на компилируемом языке, а прямо на страничке в динамически созданном элементe canvas.

Полезного в коде немного, но есть:

• функция получает аргументом только id раздела, в котором выполняет всю работу;
• чтобы не возиться с многочисленными свойствами создаваемых канвы и кнопок, создаются просто вложенные div, а туда в свойство innerHTML заталкивается канва и коды для кнопок;
• эти кнопки потом легко "вытащить" методом querySelectorAll по идентификатору класса myBtn и динамически навесить на динамически созданные элементы обработчики нужных событий (главное, чтобы элементы были к этому моменту созданы, а динамические они или статические никакой роли не играет).

Вот эта заготовка в работе:

 SimplePainter.html, открыть в текущем окне/вкладке (4 Кб)

...а код, как всегда, можно увидеть из исходника открывающейся страницы, предполагается, что он будет сохранён в файле .html и кодировке Юникода UTF-8.

Следует помнить, что не все браузеры нормально поддерживают поле выбора произвольного цвета, плюс браузер может как-то странно обрабатывать событие change, например, у меня оно возникает только при двойном шелчке мышью в окне колормиксера.

Подумайте также - в любую ли разметку встроится такое вычисление координат мыши, как в скрипте?

Увы, думаю, что нет. Свойства canvas.offsetLeft и canvas.offsetTop не всегда возвращают то, что мы ожидаем. Они вернут количество пикселей, на которые элемент канвы смещён относительно своего элемента offsetParent, которым может быть, например, определённый на уровне документа раздел div, содержащий холст. Чтобы действовать наверняка, по идее, нужно пропустить цепочку offsetParent, начиная с самого элемента canvas. Но я не уверен, что все браузеры сожрут это :)

Впрочем, в разметке моего блога и в моём Firefox это сработало, а вот в IE11 - уже нет, хотя на отдельной странице всё верно. В общем, вот как изменится часть скрипта, отвечающая за позиционирование мыши, если учесть написанное:

   function relMouseCoords (event) {
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;
    do {
        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    } while (currentElement = currentElement.offsetParent);
    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;
    return { x:canvasX, y:canvasY };
   }
   HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

   canvas.addEventListener("mousedown", function(e) { //нажатие кнопки мыши
    mouse = canvas.relMouseCoords(e);
    draw = true;
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);
   });
   canvas.addEventListener("mousemove", function (e) { //перемещение мыши
    if (draw) { //если рисуем
     mouse = canvas.relMouseCoords(e);
     ctx.lineTo (mouse.x, mouse.y);
     ctx.stroke();
    }
   });
   canvas.addEventListener("mouseup", function (e){ //отпускание кнопки мыши
    mouse = canvas.relMouseCoords(e);
    ctx.lineTo (mouse.x, mouse.y);
    ctx.stroke();
    ctx.closePath();
    draw = false;
   });

04.11.2019, 16:57 [1834 просмотра]