Desenhar com mouse usando canvas e JavaScript
37d atrás
Nesse tutorial, vamos fazer um "desenho a mão", na verdade com o mouse, usando canvas e #JavaScript. Vai ficar parecido com um efeito de desenho a lápis/caneta/giz.
Para iniciar, coloque um elemento canvas no seu HTML:
<canvas></canvas>
No JavaScript, nós vamos selecionar o elemento e escolher o contexto 2d:
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let drawing = false;
let x = 0;
let y = 0;
Agora vamos adicionar a função para iniciar o desenho, que vai iniciar com o clique do botão esquerdo do mouse:
function startDrawing(e) {
drawing = true;
x = e.offsetX;
y = e.offsetY;
}
canvas.addEventListener('mousedown', startDrawing);
Essa é função para quando você mover o mouse:
function draw(e) {
if (!drawing) return;
// Cria um caminho começando no último x e y, terminando na posição do mouse atual
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
// Atualiza o valor do último x e y, para a posição atual
x = e.offsetX;
y = e.offsetY;
}
canvas.addEventListener('mousemove', draw);
Por último, vamos adicionar a função para parar de desenhar, ela vai ser acionado quando você levantar o botão esquerdo, ou quando o mouse sair de cima do canvas:
function stopDrawing() {
drawing = false;
}
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
Veja o código completo, e o exemplo em funcionamento:
Comentários (0)