Ранее мы рассматривали в основном статическую графику на canvas. Но мы также можем создавать фигуры динамически, просто рисуя указателем мыши.
Для этого определим следующую страницу:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <canvas id="canvas" width="400" height="250" style="background-color:#eee; border: 1px solid #ccc; margin:10px;"></canvas> <script> const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); const w = canvas.width; const h=canvas.height; const mouse = { x:0, y:0}; // координаты мыши let draw = false; // нажатие мыши canvas.addEventListener("mousedown", function(e){ mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; draw = true; context.beginPath(); context.moveTo(mouse.x, mouse.y); }); // перемещение мыши canvas.addEventListener("mousemove", function(e){ if(draw==true){ mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; context.lineTo(mouse.x, mouse.y); context.stroke(); } }); // отпускаем мышь canvas.addEventListener("mouseup", function(e){ mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; context.lineTo(mouse.x, mouse.y); context.stroke(); context.closePath(); draw = false; }); </script> </body> </html>
Для обработки движения мыши для элемента canvas определены три обработчика - нажатия мыши, перемещения и отпускания мыши. При нажатии мыши мы устанавливаем переменную draw равным true. То есть идет рисование. Также при нажатии мы фиксируем точку, с которой будет идти рисование.
При перемещении мыши получаем точку, на которую переместился указатель, и рисуем линию. При отпускании указателя закрываем графический путь методом
context.closePath()
и сбрасываем переменную draw в false.