Форум

Иванasd2 · #1 (**permalink**) 01.07.2021, 17:40

Здравствуйте. Есть некоторый new Image() и координаты x1 y1 x2 y2. Как нарисовать в канвас линию от одной точки к другой с некоторым шагом используя эти объекты?

function drawLine() {
  par.forEach((i) => {
    par.forEach((j) => {
      const x1 = i.x;
      const y1 = i.y;
      const x2 = j.x;
      const y2 = j.y;
      const len = Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
      const alpha = 1 - len / props.lineLen;
      if (len < props.lineLen) {
        for (let z = 0; z < len; z += props.lineStep) {
          const img = new Image();
          img.src = `face/${props.face[1]}.png`;
          ctx.drawImage(img, x1, y1, props.lineSize, props.lineSize);
        }
      }
    });
  });
}

рони · #2 (**permalink**) 01.07.2021, 17:48

Иванasd2,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 01.07.2021, 18:33

Иванasd2,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas id="canvas" height="200" width="400"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const image = new Image(60, 45);
        const drawLine = (image, from, to, num, ctx) => {
            for (let i = 0; i < num; i++) {
                let dx = from.x + (to.x - from.x) * i / num;
                let dy = from.y + (to.y - from.y) * i / num;
                ctx.drawImage(image, dx, dy, 60, 45);
            }
        }
        image.onload = _ => drawLine(image, {
            x: 1,
            y: 1
        }, {
            x: 370,
            y: 180
        }, 12, ctx)
        image.src = image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
    </script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript