Как нарисовать линию из объектов из точки А в точку Б с некоторым шагом?
Вложений: 1
Здравствуйте. Есть некоторый 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);
}
}
});
});
}
|
Иванasd2,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
canvas drawLine
Иван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>
|
| Часовой пояс GMT +3, время: 00:18. |