canvas requestAnimationFrame 动画

本文介绍了一种利用requestAnimationFrame方法实现高效逐帧动画的技术。通过该方法,动画函数的执行会在浏览器重绘前进行,确保了动画流畅性并遵循W3C标准。文章通过实例演示了如何设置动画循环,响应鼠标事件控制动画开始与结束。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如果你想做逐帧动画的时候,你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。通常来说,被调用的频率是每秒60次,但是一般会遵循W3C标准规定的频率。如果是后台标签页面,重绘频率则会大大降低。

 

var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext('2d');
    var running=false;
//    get requestAnimationFrame
    function AFrame(callback){
        return window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    }
    var raFrame=AFrame();
    var raf;
    var ball={
        x:100,
        y:100,
        vx:5,
        vy:1,
        radius:25,
        color:'blue',
        draw:function(){
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fillStyle=this.color;
            ctx.fill();
        }
    };
    function  clear(){
        ctx.fillStyle=ctx.fillStyle = 'rgba(255,255,255,0.3)';
        ctx.fillRect(0,0,canvas.width,canvas.height);
    }
    function draw(){
//        ctx.fillStyle = 'rgba(255,255,255,0.3)';
//        ctx.fillRect(0,0,canvas.width,canvas.height);
//      ctx.clearRect(0,0,canvas.width,canvas.height);//每次画之前清除上一次的
        clear();
        ball.draw();
        ball.x += ball.vx;
        ball.y += ball.vy;

        if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
            ball.vy = -ball.vy;
        }
        if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
            ball.vx = -ball.vx;
        }
       raf= raFrame(draw);
        console.log("运行")
    }
    canvas.addEventListener('mousemove',function(e){
        if(!running){
            clear();
            ball.x = e.clientX;
            ball.y = e.clientY;
            ball.draw();
        }
//        raf=raFrame(draw);
    });
    canvas.addEventListener("click",function(e){
        if (!running) {
            raf=raFrame(draw);
            running = true;
        }
    });
    canvas.addEventListener('mouseout',function(e){
        window.cancelAnimationFrame(raf);
        running = false;
    });
    ball.draw();

转载于:https://my.oschina.net/swmhxhs/blog/1490483

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值