Рисование мышью

Последнее обновление: 07.11.2023

Ранее мы рассматривали в основном статическую графику на 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.

Рисование мышью на canvas в JavaScript

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм