Загрузка...

Как создать движение объекта по траектории в Canvas?

Тема в разделе Frontend создана пользователем 4RT1KS0N 25 дек 2020. 277 просмотров

  1. 4RT1KS0N
    4RT1KS0N Автор темы 25 дек 2020 Да я не сплю, просто у меня разрез глаз такой 94 6 апр 2019
    Есть отрисованный в канвасе объект, его нужно пустить по траектории окружности и после начать крутить вокруг себя.
    ----Сам объект-----
    ctx.beginPath();
    // Rectangle
    ctx.lineWidth="3";
    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.rect(x+150, y, 300, 100);
    ctx.fill();
    ctx.stroke();
    ctx.lineWidth="3"
    // Triangle
    ctx.lineWidth="3"
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.moveTo(x+148, y);
    ctx.lineTo(x+199, y+75-150);
    ctx.lineTo(x+248, y);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    // lines
    ctx.fillStyle = "grey";
    ctx.beginPath();
    ctx.moveTo(x+200, y+74-150);
    ctx.lineTo(x+400, y+74-150);
    ctx.lineTo(x+451, y+150-150);
    ctx.lineTo(x+250, y+150-150);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    // more lines :)
    ctx.beginPath();
    ctx.moveTo(x+245, y);
    ctx.lineTo(x+245, y+250-150);
    ctx.stroke();
    //door
    ctx.lineWidth = "3"
    ctx.fillStyle = "brown"

    ctx.fill();
    ctx.stroke();
    //window
    ctx.lineWidth = "3"
    ctx.fillStyle = "yellow"
    ctx.beginPath();
    ctx.moveTo(x+175, y+175-150);
    ctx.lineTo(x+220, y+175-150);
    ctx.lineTo(x+220, y+220-150);
    ctx.lineTo(x+175, y+220-150);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ----------------
    Заранее, спасибо
     
Загрузка...
Top