Формы, движущиеся на холсте HTML5, когда они не должны: requestAnimationFrame () - PullRequest
Новая
       22

Формы, движущиеся на холсте HTML5, когда они не должны: requestAnimationFrame ()

0 голосов
/ 03 сентября 2018

Я хочу создать много прямоугольников, которые начинаются сверху html-холста и начинают двигаться вниз, пока они не исчезнут из поля просмотра холста. Поэтому я создал класс с большим количеством параметров (x-position, y-position, width, height, color, context), чтобы я мог использовать цикл for для создания множества объектов-прямоугольников с любыми аргументами, которые я хочу передать им. , Проблема ... барабанная дробь

Фигуры начинают двигаться вниз, когда я передаю функцию, которая создает прямоугольные объекты и анимирует их в метод requestAnimationFrame. черт, я даже не сказал им двигаться!

достаточно yada-yada, вот код: (просмотреть фрагмент в полноэкранном режиме) 

function resize(canvasElement) {
    window.addEventListener("resize", function () {
        canvasElement.width = window.innerWidth / 3;
        canvasElement.height = window.innerHeight * 0.9975;
    })
}
var radius = 5;
class roundRect {
    constructor(rectX, rectY, rectHeight, rectWidth, stroke, fill, c) {
        c.clearRect(0, 0, 1000, 1000);
        c.beginPath();
        c.strokeStyle = stroke;
        c.fillStyle = fill;
        c.moveTo(rectX + rectWidth/2, rectY);
        c.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + rectHeight, radius);
        c.arcTo(rectX + rectWidth, rectY + rectHeight, rectX, rectY + rectHeight, radius);
        c.arcTo(rectX, rectY + rectHeight, rectX, rectY, radius);
        c.arcTo(rectX, rectY, rectX + rectWidth / 2, rectY, radius);
        c.closePath();
        c.fill();
        c.stroke();
    }
}
function animate(rectYpar) {
    new roundRect(50, rectYpar, 100, 8, "red", "red", ctx);
    requestAnimationFrame(animate);
}
{
    var canvas = document.body.querySelector("#canvasOne");
    canvas.width = window.innerWidth / 3;
    canvas.height = window.innerHeight * 0.9975;
    resize(canvas);
    var ctx = canvas.getContext("2d");
    animate(0)
}
body {
    margin: 0;
}
#canvasOne {
    border:1px solid black;
}
<!DOCTYPE html>
<html>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
        <canvas id="canvasOne"></canvas>
</body>
</html>

РЕДАКТИРОВАТЬ : По какой-то причине фрагмент не работает при переполнении стека, поэтому вот ссылка на страницу на codePen:

https://codepen.io/Undefined_Variable/pen/aaWNJV

просмотрите его в полноэкранном режиме и обновляйте его каждый раз, когда фигура опускается вниз, чтобы увидеть проблему. Заранее спасибо!

1 Ответ

0 голосов
/ 03 сентября 2018

Хорошо, ребята: я обнаружил проблему: функция animate должна иметь следующую структуру: 

var rectY = 10;
function animate() {
    requestAnimationFrame(animate);
    new roundRect(10, rectY, 50, 7, "blue", "red", ctx);
    rectY += 1;
}

и чтобы нарисовать фигуру, обратный вызов должен был выглядеть так: 

animate();

Наверное, никому нет дела, но все равно спасибо LOL

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

Похожие темы

...