линия сокращается и расширяется в HTML - PullRequest
Новая
       5

линия сокращается и расширяется в HTML

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

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

<!DOCTYPE html>


<style>
    canvas {
        border: solid;
        border-color: black; }
</style>


<canvas id="canvas">
</canvas>
<script>

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = "black";
    var posX = 0;
    var lineLength = 50;
    var speed = 2;

    function drawLine() {
        ctx.beginPath();
        ctx.moveTo(posX, 50);
        ctx.lineTo(posX + lineLength, 50);
        ctx.stroke();
    }

    function moveLine() {
        posX += speed;
        if (posX < 0 || posX > canvas.width - 50) {
            speed = speed * -1;
        }
    }

    function loop() {
        // clear old frame;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        moveLine();
        drawLine();
        requestAnimationFrame(loop);
    }
    requestAnimationFrame(loop);
</script>

1 Ответ

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

Вы хотите изменить значение lineLength в цикле, а не posX.Вот так: 

function moveLine() {
    lineLength += speed;
    if (lineLength < 0 || lineLength > canvas.width - 50) {
        speed = speed * -1;
    }
}

Тогда вам просто нужно отцентрировать вашу линию: 

function drawLine() {
    var center = canvas.width/2;
    ctx.beginPath();
    ctx.moveTo(center - (lineLength/2), 50);
    ctx.lineTo(center + (lineLength/2), 50);
    ctx.stroke();
}

Поскольку позиция X вашей строки не является переменной, вам не нужно posXна все.

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

Нет похожих вопросов

...