Недавно я изучил некоторые новые атрибуты элементов HTML5 и обнаружил, что их действительно легко использовать, особенно новый элемент тега Canvas. Официальное введение: Canvas API (canvas) — это новый тег в HTML5, который используется для создания изображений на веб-страницах в реальном времени и позволяет манипулировать содержимым изображений. По сути, это растровое изображение, которым можно манипулировать с помощью JavaScript. В следующем примере используется JavaScript в сочетании с Canvas для реализации функции доски для рисования.
Демонстрационное изображение эффекта:
Часть кода (скопируйте ее напрямую и используйте)
<!DOCTYPE HTML><html><head> <meta charset=utf-8 /> <title>JavaScript+Canvas реализует пользовательскую доску для рисования</title></head><body><canvas id=canvas width=600 height =300></canvas><script type=text/javascript> var Canvas = document.getElementById(canvas); var ctx = Canvas.getContext(2d); //Рисуем черный прямоугольник ctx.fillStyle=black; ctx.fillRect(0,0,600,300) //Нажимаем метку var onoff = false; //Переменные oldx и oldy представляют координаты до перемещения мыши var oldx = -10); ; var oldy = -10; //Установим цвет var linecolor = white //Установим ширину линии var linw = 4; //Добавляем событие перемещения мыши Canvas.addEventListener(mousemove,draw,true); //Третий параметр в основном связан с захватом или всплытием //Добавляем событие нажатия мыши Canvas.addEventListener(mousedown,down,false); // Добавляем мышь. событие Canvas.addEventListener(mouseup,up,false); функция down(event){ onoff = true; oldx = event.pageX-10; event.pageY-10; //console.log(event.pageX+'............000.............'+event.pageY) ; /event.pageX и event.pageY относятся к положению мыши на всей странице, включая часть переполнения (то есть полосу прокрутки) } function up(){ onoff = false } function draw(event){ if(onoff); == true) { var newx = event.pageX-10; event.pageY-10; ctx.beginPath();//beginPath() Отменяет любой текущий путь и запускает новый. Он устанавливает текущую точку в (0,0). ctx.moveTo(oldx,oldy); //Перемещаемся к координате при нажатии, используя эту координату в качестве начала координат ctx.lineTo(newx,newy); //Рисуем новый путь ctx.strokeStyle=linecolor; ctx.lineWidth=linw); ; ctx.lineCap=round; ctx.stroke();//Методstroke() фактически рисует путь, определенный методами moveTo() и lineTo(). Цвет по умолчанию — черный. //Назначаем новую позицию мыши начальной координате начала следующего рисования oldx = newx; oldy = newy };</script></body></html>;Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.