首页 新闻 搜索 专区 学院

js画布,小球速度

0
悬赏园豆:50 [已解决问题] 解决于 2015-11-05 10:15

哪位大神有空请帮忙看一下,为什么多次点击start按钮,动画中的小球速度会增加?

全部代码如下:

 

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <title>Canvas start and stop</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            width: 800px;
            height: 400px;
            margin: 0 auto;
            border: 2px dotted #498b50;
        }

        #mycanvas {
            border: 1px dotted #000;
        }
    </style>
</head>
<body>
<div class="container">
    <canvas id="mycanvas" width="800" height="400"></canvas>
    <input id="start" type="button" value="start">
    <input id="stop" type="button" value="stop">
</div>
<!--<p id="pid">x:</p>-->
<!--<input id="accle" type="button" value="accelerate">-->
<script>

    (function () {
        var lastTime = 0;
        var vendors = ['ms', 'moz', 'webkit', 'o'];
        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame']
            || window[vendors[x] + 'CancelRequestAnimationFrame'];
        }

        if (!window.requestAnimationFrame)
            window.requestAnimationFrame = function (callback) {
                var id = window.setTimeout(function () {
                    callback();
                }, 0);
                return id;
            };

        if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = function (id) {
                clearTimeout(id);
            };
    }());


    (function () {

        // Get the buttons.
        var startBtn = document.getElementById('start');
        var stopBtn = document.getElementById('stop');
//        var p = document.getElementById("pid");

        // A variable to store the requestID.
        var requestID;

        // Canvas
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        var w = canvas.width;
        var h = canvas.height;
        var x = 0;
        var y = 15;
        var xspeed = 3;
        var yspeed = 3;

        // Draw the initial box on the canvas.
        // Animate.
        function animate() {

            x += xspeed;
            y += yspeed;
//            p.innerHTML = "x:"+x;

            // If the box has not reached the end draw on the canvas.
            // Otherwise stop the animation.
            if (x <= 0 || x >= (w - 10)) {
                xspeed = -xspeed;
            }
            if (y <= 0 || y >= (h - 10)) {
                yspeed = -yspeed;
            }
            draw();


            function draw() {
                context.save();
                context.clearRect(0, 0, w, h);
                context.fillStyle = "#0066cc";
                context.beginPath();
                context.arc(x, y, 10, 0, Math.PI * 2, true);
                context.closePath();
                context.fill();
            }
            requestID = requestAnimationFrame(animate);
        }

        // Event listener for the start button.
        startBtn.addEventListener('click', function (e) {
            e.preventDefault();

            // Start the animation.
            requestID = requestAnimationFrame(animate);
        });


        // Event listener for the stop button.
        stopBtn.addEventListener('click', function (e) {
            e.preventDefault();

            // Stop the animation;
            cancelAnimationFrame(requestID);
        });

    }());

</script>
</body>
</html>
阳子杰的主页 阳子杰 | 初学一级 | 园豆:157
提问于:2015-11-04 23:50
< >
分享
最佳答案
1

因为setTimeout. 你每次点击Start 按钮. 就开启一个setTimeout. 

假设你点了2次Start 按钮.  就会开启两次setTimeout.  也就是说每秒钟执行2次animate() function.

所以速度会加快.

当你点Stop 按钮的时候. 就会关闭一个Timeout. 所以会减少animate() function的执行次数. 所以会速度减慢.

收获园豆:50
李丶GuanYao | 小虾三级 |园豆:1228 | 2015-11-05 08:20

setTimeout的返回ID是以栈的形式保存吗?

阳子杰 | 园豆:157 (初学一级) | 2015-11-05 09:04

@阳子杰: 

 到底是堆还是栈.这个不是很清楚.没研究过.. 因为用alert 监控id的时候. 你会发现. 它的id的递增的..

看起来应该是Timeout每执行一次都会返回一个id.  但是当你点stop的时候.  说不定是哪个timeout返回的id的..

李丶GuanYao | 园豆:1228 (小虾三级) | 2015-11-05 09:50

@李丶GuanYao: 刚刚研究了一下,会把后启动的setTimeout清除掉

阳子杰 | 园豆:157 (初学一级) | 2015-11-05 10:17

@李丶GuanYao:修改了一下延迟时间,真的是不确定是哪个timeout返回的ID~~

阳子杰 | 园豆:157 (初学一级) | 2015-11-05 10:25
其他回答(1)
0

1.我api不熟悉,canvas有一对标签式必写的,为了在标签内的场景元素动画不受标签外的设置影响,你可以查查是什么标签?

2. 时间贞没控制好?

Coca-code | 园豆:9 (初学一级) | 2015-11-05 01:52
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册