Question

所以，我已经创建了一个包含10个块（矩形）的数组，这些数据块水平移向＆＃34;完成＆＃34;线（画布宽度的末端），速度可变。我正在寻找一种方法来跟踪每个数组元素的到达顺序，并在每个矩形停止移动时将其显示在每个矩形的顶部。我尝试过使用计数器和fillText方法来做到这一点，但只有在其他元素完全停止然后它才会替换顺序之前它才有效。为了更好地了解发生的情况，这是我的代码。如果有人为了实现我的目标有什么建议，我们非常感谢。请记住，我只使用纯JavaScript，因为我没有jQuery或其他框架，因为我正在学习基础知识。提前谢谢。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cars</title>
    <style>
        canvas {
            border:1px solid #3D0404;
        }
        h2 {
            margin-left:23%;
        }

    </style>
    <script>
        var c;
        var ctx;
        var cars = [];
        var width = 100;
        var height = 100;
        var x = 0;
        var y = 0;
        var i;
        var temp;
        var cw = 1000;
        var ch = 1000;


        window.requestAnimFrame = (function(){
                    return  window.requestAnimationFrame ||
                      window.webkitRequestAnimationFrame ||
                      window.mozRequestAnimationFrame    ||
                      function( callback ){
                      window.setTimeout(callback, 1000 / 60);
                  };
        })();

        function init() {
            c = document.getElementById("myCanvas");
            ctx = c.getContext("2d");

            pushCar();

        }

        function CreateCar(x,y,width,height,speed){
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.speed = speed;

        }

        function pushCar(){

            for (var i=0; i<10; i++){
                var speed = Math.random() * 10;
                var car = new CreateCar(x,y,width,height,speed);
                cars.push(car);
                y += 100;
            }

            drawAll();
        }

        function clear (){
            ctx.clearRect (0,0,cw,ch);
        }

        function draw(cars){

            ctx.beginPath();
            ctx.fillStyle = "#f00";
            ctx.fillRect(temp.x, temp.y, width, height);
            ctx.strokeStyle = "#000";
            ctx.outlineWidth = 2;
            ctx.strokeRect(temp.x, temp.y, width, height);  
            ctx.closePath();
        }

        function drawAll(){
            clear();
            var z = 1;
            for (var i=0; i<cars.length; i++){

                temp = cars[i];
                draw(temp);
                if (temp.x+100 < c.width){
                temp.x += temp.speed;
                }else {                 
                    ctx.font = "20pt Verdana";
                    ctx.fillStyle = "#000";
                    ctx.fillText(z, 950, temp.y+55);
                    z++;
                }
            }

            requestAnimFrame(drawAll, c);

        }


    </script>

</head>
<body onLoad = "init()">

    <canvas id="myCanvas" width="1000" height="1000"></canvas>

</body>
</html>

Answer 1

您需要将z变量放在循环外部，并将每辆汽车的位置保存在对象中。您还需要检查是否已定义position[i]以避免将当前位置增加多于所需的时间。

var z;
var position;

function drawAll() {
    clear();
    for (var i = 0; i < cars.length; i++) {
        temp = cars[i];
        draw(temp);
        if (temp.x + 100 < c.width) {
            temp.x += temp.speed;
        } else {
            if (!position[i]) {
                position[i] = z;
                z++;
            }
            ctx.font = "20pt Verdana";
            ctx.fillStyle = "#000";
            ctx.fillText(position[i], 950, temp.y + 55);
        }
    }
    requestAnimFrame(drawAll, c);
}

http://jsfiddle.net/acasaccia/u2vhaqyt/

动画以JavaScript结尾后，跟踪并显示数组元素的到达顺序

1 个答案: