Ты настоящий ГУРУ. Всё настолько доступно и свободно излагается. Спасибо, до этого такие хорошие уроки можно было посмотреть только на английском.

Вариант с кнопкой очистки и изменением размера пера. HTML: 1 2 3 4 5 CSS: #convas_paint { width: 400px; height: 200px; border: 3px solid black; margin: 40px; cursor: crosshair; box-shadow: 0px 0px 30px rgba(0,0,0,0.5); } .panel { margin: 40px; } JS: var canvas = document.getElementById('convas_paint'); var ctx = canvas.getContext('2d'); var myColor = 'black'; var rSize = 1; document.getElementById('size').oninput = function(){ rSize = this.value; } document.getElementById("color").oninput = function(){ myColor = this.value; } canvas.onmousedown = function(event){ var x = event.offsetX; var y = event.offsetY; ctx.beginPath(); ctx.moveTo (x,y); ctx.drawing = true; } canvas.onmousemove = function (event){ if (ctx.drawing){ var x = event.offsetX; var y = event.offsetY; ctx.lineWidth = rSize ctx.strokeStyle = myColor ctx.lineCap = "round" ctx.lineTo (x,y) ctx.stroke() } } canvas.onmouseup = function(){ ctx.drawing = false; } document.getElementById('pClear').onclick = function(){ ctx.beginPath(); ctx.clearRect(0, 0, 400, 200); }

Спасибо за Видеоуроки! Очень понятно все и практично)

Лайк за годный контент. Очень понятно объясняете. Так держать!!!

Спасибо за видео урок :)

полезный урок, спасибо!

Спасибо за урок! Просто и понятною

Спасибо, очень круто.

privet s Armeniii mne ochen nravitsa vashe video izuchayu vse i vsem svoim znakomim programistom rekamenduyu posmotret deistvitelno nigde net takogo kachestvo i dostupnosti kak u vas respect ot Armyan

Здорово!

Респект...как всегда..

Можно сделать рисовалку с плавными линиями (без углов и прерываний) var canvas = document.getElementById("c1"); var ctx = canvas.getContext("2d"); var myColor = "red" document.getElementById("colorrr").oninput = function(){myColor = this.value; ctx.beginPath();} canvas.onmousedown = function(event){ var x = event.offsetX; var y = event.offsetY; ctx.strokeStyle = myColor ctx.lineCap = "round" ctx.lineWidth = 5 ctx.moveTo (x,y); canvas.onmousemove = function (event){ var x = event.offsetX; var y = event.offsetY; ctx.lineTo (x,y) ctx.stroke() } canvas.onmouseup = function(){ canvas.onmousemove = null; }}

Thx 👍

палец вверх кто писал нехорошие слова))

Скажите а можно как то отловить в какую сторону мы зажали и тянем то есть в лево или в право

Toggle device toolbar в Chrome можно включить пиксельную линейку.

А можно по аналогии canvas.onmousemove = null для отмены отслеживания курсора мыши при событии mouseup писать так: canvas.onmousemove = function() { return false; }

А как сделать такое, но чтобы результат всегда сохранялся. Ну тоесть допустим поставить такой пейнт на сайт и чтобы каждый заходил и зарисовывал других?

Можно ведь не заводить постоянно две переменные canvas и ctx. Можно разу написать var ctx = document.get.elementById('c1').getContext('2d'); Работа будет та же, но код будет немного сокращён

Скажите пожалуйста, для чего мы 2 раза задаем ширину canvas. Имею ввиду в html и CSS?

у меня почему то ничего не рисуется

Выбор цвета работает без написания функции. let canvas = document.getElementById('c2'), ctx = canvas.getContext('2d'); canvas.onmousedown = function(event){ canvas.onmousemove = function(event){ let x = event.offsetX; let y = event.offsetY; ctx.fillRect(x-2, y-2, 10, 10); let myColor = document.getElementById('myColor').value; ctx.fillStyle = myColor; ctx.fill()//Команда заливки ctx.lineCap = "round" ctx.lineWidth = 5; } canvas.onmouseup = function(){ canvas.onmousemove = null; } }

У меня ошибку пишет в getContext('2d')

лучше сделать не canvas.onmouseup = function () { canvas.onmousemove = null; } а document.onmouseup = function () { canvas.onmousemove = null; }

example of implementation one more Paint in JavaScript: kzfaq.info/get/bejne/a5l5ndp-lrWuYY0.html