2

const canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var pageX,
  pageY,
  elem,
  tool,
  lengthSquare = 25,
  heightSquare = 25,
  previous,
  mouseDown,
  mouseUp,
  brushColor = 'black';

function Paint() {

  this.pencil = () => {
    tool = 'pencil';
    lengthSquare = heightSquare = 5;
  };

  this.brush = () => {
    tool = 'brush';
    lengthSquare = heightSquare = 25;
  };

  this.fill = () => {
    tool = 'fill';
  };

  this.clear = () => {
    tool = 'clear';
    brushColor = 'white'
  };

  canvas.addEventListener('mousedown', () => {
    mouseDown = true;
    mouseUp = false;

    if (tool == 'fill') {
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

  });

  canvas.addEventListener('mouseup', () => {
    mouseDown = false;
    mouseUp = true;
  });

  canvas.addEventListener('mousemove', () => {

    if (mouseDown) {
      elem = canvas.getBoundingClientRect();
      pageX = event.clientX;
      pageY = event.clientY;
      ctx.fillStyle = brushColor;

      if (tool == 'pencil' || tool == 'brush') {
        ctx.fillRect(pageX - elem.left, pageY - elem.top, lengthSquare, heightSquare);
      } else if (tool == 'clear') {
        ctx.clearRect(pageX - elem.left, pageY - elem.top, lengthSquare, heightSquare);
      }

    }

  });

  document.body.addEventListener('click', () => {
    let target = event.target;
    let action = target.getAttribute('data-type');

    if (action) {

      if (previous) {
        previous.classList.remove('active');
      }

      target.classList.add('active');
      previous = target;
      this[action]();
    };

  });
}

new Paint();
body {
  position: relative;
  min-height: 100vh;
  background: gray;
  margin: 0;
}

.draw {
  position: absolute;
  top: 0;
  right: 10%;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tools {
  position: absolute;
  top: 0%;
  left: 0%;
  bottom: 0%;
  width: 48px;
  background: #575a5e;
}

.tools>div {
  width: 48px;
  height: 48px;
}

.tools div:hover {
  cursor: pointer;
}

.pencil {
  background: url('icons.png');
  background-position-x: 0;
}

.brush {
  background: url('icons.png');
  background-position-x: -48px;
}

.fill {
  background: url('icons.png');
  background-position-x: -96px;
}

.clear {
  background: url('icons.png');
  background-position-x: -144px;
}

.active {
  background-color: #cdd0d6;
}

canvas {
  border: 1px solid black;
  background: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class='tools'>
    <div class='pencil' data-type='pencil'></div>
    <div class='brush'><img src='http://s1.iconbird.com/ico/2014/1/631/w512h5121390856650paintbrush512.png'  data-type='brush' width='48px' height='48px'></div>
    <div class='clear' data-type='fill'></div>
    <div class='fill' data-type='clear'></div>
  </div>
  <div class='draw'>
    <canvas width='800px' height='500px' id='canvas'></canvas>
  </div>

</body>

</html>

Пытаюсь делать paint. Если быстро провести мышью над canvas, он не успевает реагировать на события, тем самым не заполняя необходимое пространство. Необходимо исправить таким образом, чтобы ему было всё равно с какой скоростью пользователь рисует.

При выполнении кода разверните его на всю страницу

3
  • 1
    я думаю тут проблема не в том, что ваш код плохо работает, а то что событие mousemove при быстром перемещении не передает каждое смещение и вызывается с какой-то частотой
    – ThisMan
    Commented 20 июн. 2019 в 8:23
  • 4
    События сами по себе не приходят на каждый сдвинутый пиксель. Нужно прорисовывать не точку, над которой в текущий момент находится мышка, а регистрировать начало и конец движения. После чего заполнять простанство между двумя контрольными точками линией.
    – Alex Krass
    Commented 20 июн. 2019 в 8:25
  • 2
    Берите уравнение отрезка по двум точкам - и чертите отрезок - тогда проблемы не будет. (Аналогичная проблема бывает и на с++ и на с#) Нужно хранить xprev yprev (присваивать их при mousedown) и чертить линию от пердыдущих координат к текущим.
    – nick_n_a
    Commented 20 июн. 2019 в 8:26

1 ответ 1

2

Тут все просто:

По нажатию начинаем рисовать путь

Во время движения с нажатой мышью - рисуем

По отпусканию - замыкаем путь

var m = {x: 0,y: 0};
var ctx = canvas.getContext('2d');
ctx.lineWidth = 3;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#00CC99';

canvas.addEventListener('mousemove', e => {
  m.x = e.pageX - canvas.offsetLeft;
  m.y = e.pageY - canvas.offsetTop;
});

canvas.addEventListener('mousedown', e => {
  ctx.beginPath();
  ctx.moveTo(m.x, m.y);
  canvas.addEventListener('mousemove', paint);
});

canvas.addEventListener('mouseup', e => canvas.removeEventListener('mousemove', paint));

function paint() {
  ctx.lineTo(m.x, m.y);
  ctx.stroke();
}
<canvas width="300" height="300" style="border:solid" id="canvas"></canvas>

PS: если необходимо рисовать не линиями, рекомендую эту ссылку

неплохой пример аналогичного приложения

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.