Рисование линий холстом, создающее 1 изогнутый и 1 не изогнутый одновременно - PullRequest
0 голосов
/ 19 июня 2019

Я пытаюсь сделать так, чтобы это была только 1 кривая линия, но по какой-то причине она создает ее за зубчатой, которую я не хочу.

Я пытался добавлять и удалять, и по какой-то причинелиния все еще рисует, когда я удалил "beginPath ()."Но с bezierCurveTo он остается неровным, но снова образует плавную линию, когда я снова добавляю "beginPath ()".

const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.strokeStyle = 'hue(100%, 75%, 50%)';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 5;
ctx.globalCompositeOperation = 'multiply';

let isDrawing = false;
let lastX = 0;
let lastY = 0;

let points = [];


function draw(e) {
  if (!isDrawing) return;

  var px2 = points.map(point => point.x)[2];
  var py2 = points.map(point => point.y)[2];
  var px1 = points.map(point => point.x)[1];
  var py1 = points.map(point => point.y)[1];
  var px0 = points.map(point => point.x)[0];
  var py0 = points.map(point => point.y)[0];

  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(px2, py2);

  if (points.length > 3) {
    ctx.bezierCurveTo(px1, py1, px0, py0, e.offsetX, e.offsetY);
  }

  var slope = ((lastY - e.offsetY) + 1) / (Math.abs(lastX - e.offsetX) + 1);

  if (slope < -0.5) {
    if (ctx.lineWidth < 15) {
      ctx.lineWidth++;
    }
  } else {
    if (ctx.lineWidth > 3) {
      ctx.lineWidth -= 1;
    }
  }

  [lastX, lastY] = [e.offsetX, e.offsetY];

  points.unshift({
    x: lastX,
    y: lastY,
    size: ctx.lineWidth,
    color: ctx.strokeStyle,
    mode: "draw"
  });
}

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
  ctx.lineWidth = 5;
  points = [];
});

canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);
<canvas id="draw"></canvas>

Я ожидаю, что конечный результат будет иметь только 1 изогнутую линию и удалит зазубренную, наслоенную сверху.

Вы такжеУвидеть 2 слоя можно очень быстро, только если вы нарисуете кривую очень быстро.

Любая помощь приветствуется.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...