简述帧频率跟计时器的区别及原理,并用帧频率的方式实现一个小球移动。

terry Javascript 239

简述帧频率跟计时器的区别及原理,并用帧频率的方式实现一个小球移动。

 // 获取canvas标签
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    // 时间轴
    var timer = 0;
    var deg = Math.PI / 180;
    var x1 = 100;
    var y1 = 100;
    var y2 = 300;
    var r = 20;
    function run() {
        // 帧频率
        var a = requestAnimationFrame(run);
        // console.log(a);
        timer++;
        // console.log(timer);
        canvas.width = canvas.width;
        x1 += 2;
        ctx.beginPath();
        ctx.arc(x1, y1, r, 0, 360 * deg);
        ctx.strokeStyle = '2';
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.stroke();
    }
    run();
  • 暂无回复内容