canvas动画简单操作

深藏阁楼爱情的钟 2023-06-10 15:26 9阅读 0赞

# canvas动画 #

## 小球滚动效果 ##

关键api：
    window.requestAnimationFrame(draw)
    会递归调用draw函数，替代setInterval
    
    var x = 20;
    var speed = 4;
    //电脑的帧率是1秒钟60Hz， 就相当于一秒钟可以播放60张图片，就相当于播放一张图片使用16.7ms
    
    function draw () {
        //1. 先把画布清空
        context.clearRect(0, 0, canvas.width, canvas.height);
        //2. 画小球
        context.beginPath();
        var gradient = context.createRadialGradient(x-10,190,0,x,200,20);
        gradient.addColorStop(0,'#fff');
        gradient.addColorStop(1,'#333');
        context.fillStyle = gradient;
        context.arc(x, 200, 20, 0, 2*Math.PI);
        context.fill();
        //3. x要移动
        x  = speed;
        if(x>canvas.width - 20||x<20){
            speed = -speed;
        }
        //被优化过的动画执行方向1.递归调用；2.可以自适应浏览器的刷新的帧率
        window.requestAnimationFrame(draw);
    }
    draw();

## 小球x,y轴回弹效果 ##

关键点：
    1.  跟上面例子差不多
    2.  在y轴上加多一个speed即可
    
    var xspeed = 2;
    var yspeed = 2;
    //小球的初始位置
    var x = 20;
    var y = 200;
    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        //创建一张新的玻璃纸
        context.beginPath();
        var gradient = context.createRadialGradient(x - 10, y-10, 0, x, y, 20);
        gradient.addColorStop(0, '#fff');
        gradient.addColorStop(1, '#333');
        context.fillStyle = gradient;
        context.arc(x, y, 20, 0, 2*Math.PI);
        context.fill();
        x  = xspeed;
        y  = yspeed;
        //水平方向到达了边界, 就调头， 速度往反方向
        if (x < 20 || x > canvas.width - 20) {
            xspeed = -xspeed;
        }
        if (y < 20 || y > canvas.height - 20) {
            yspeed = -yspeed;
        }
        window.requestAnimationFrame(draw);
    }
    draw();

## 小鸟挥动翅膀 ##

var birdsImg = new Image();
    birdsImg.src = "./img/birds.png";
    
    //图片加载完成之后，才开始执行绘制操作
    birdsImg.onload = function () {
        //翅膀扇了第几次
        var index = 0;
        //当前是第几张图片
        var xindex = 0;
    
        //每张小鸟图片的宽高
        var w = birdsImg.width / 3;
        var h = birdsImg.height;
    
        //小鸟的位置
        var x = 100;
        var y = 100;
    
        //小鸟往下掉的速度
        var yspeed = 5;
    
        function draw() {
            //使用第几张图片
            index  = 1;
            xindex = index % 3;
            //清空画布
            context.clearRect(0, 0, canvas.width, canvas.height);
            //画每一张小鸟
            context.drawImage(birdsImg, xindex * w, 0, w, h, x, y, w, h);
            //小鸟往下掉
            y  = yspeed;
            //递归调用draw方法，实现动画
            window.requestAnimationFrame(draw);
        }
        draw();
    }

![1297718-20171225200622509-265627172.png][]

## 地球转动 ##

### 判断两张图片都加载完成的方法 ###

### 地球转动 ###

![1297718-20171225200647353-1169901202.png][]  
![1297718-20171225200656025-241982559.png][]

## 关于save和restore ##

//save保存， restore恢复， 还原
    //save的作用，是把context的当前的状态，保存起来;restore是把context最近一次保存的状态还原
    
    context.fillStyle = "red";
    context.strokeStyle = "blue";
    context.shadowColor = "cyan";
    
    //把当前的context整个保存一份
    context.save(); //就会把当前的context整个保存一份
    
    context.fillRect(100, 100, 100, 100);
    
    context.fillStyle = "green";
    context.fillRect(300, 200, 100, 100);
    
    //把最近保存的那个context直接拿过来用
    context.restore();
    
    context.fillRect(500, 300, 100, 100);

## 钟表的实现 ##

//画某一帧的方法
    function draw() {
        //0. 把坐标系的原始状态保存
        context.save();
    
        //1. 清空画布
        context.clearRect(0, 0, canvas.width, canvas.height);
    
        //2. 先平移坐标系到中心点，再旋转坐标系到12点钟的方向
        context.translate(300, 200);
        //往反方向旋转90度
        context.rotate(-0.5*Math.PI);
    
    
        //3. 画表盘
        context.beginPath();
        context.arc(0, 0, 130, 0, 2*Math.PI);
        context.strokeStyle = "blue";
        context.lineWidth = 3;
        context.stroke();
    
        //4. 画时针的刻度
        context.beginPath();
        for (var i = 0; i<12; i  ) {
            context.moveTo(115, 0);
            context.lineTo(126, 0);
            context.rotate(30/180*Math.PI);
        }
    
        context.strokeStyle = "#000";
        context.lineWidth = 6;
        context.stroke();
    
        //5. 画分针的刻度
        context.beginPath();
        for (var i = 0; i<60; i  ) {
            if (i % 5 != 0) {
                context.moveTo(120, 0);
                context.lineTo(126, 0);
            }
    
            context.rotate(6/180*Math.PI);
        }
    
        context.lineWidth = 4;
        context.stroke();
    
        //6. 算出时针， 分针， 秒针的角度
        var now = new Date();
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();
    
        m = m   s/60; //精确到几点几分钟
        h = h   m/60; //精确到几点几小时
    
        var hradian = h / 12 * 2 * Math.PI;
        var mradian = m / 60 * 2 * Math.PI;
        var sradian = s / 60 * 2 * Math.PI;
    
        //7. 画时针
        context.save();
        context.beginPath();
        context.rotate(hradian);
        context.moveTo(-15, 0);
        context.lineTo(60, 0);
        context.strokeStyle = "blue";
        context.lineWidth = 6;
        context.lineCap = "round";
        context.stroke();
        context.restore();
    
        //8. 画分针
        context.save();
        context.beginPath();
        context.rotate(mradian);
        context.moveTo(-15, 0);
        context.lineTo(70, 0);
        context.strokeStyle = "blue";
        context.lineWidth = 5;
        context.lineCap = "round";
        context.stroke();
        context.restore();
    
        //9. 画秒针
        context.save();
        context.beginPath();
        context.rotate(sradian);
        context.moveTo(-15, 0);
        context.lineTo(85, 0);
        context.strokeStyle = "red";
        context.lineWidth = 3;
        context.lineCap = "round";
        context.stroke();
        context.restore();
    
        //10. 画表心
        context.beginPath();
        context.arc(0, 0, 5, 0, 2*Math.PI);
        context.fillStyle = "red";
        context.fill();
    
        //11. 还原坐标系
        context.restore();
    }
    
    //draw();
    
    //没有必要使用requestAnimationFrame,因为这个钟表是一秒钟走一次
    setInterval(draw, 1000);

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[1297718-20171225200622509-265627172.png]: /images/20230531/4e842379eaf14e6dbea0c782191eca9f.png
[1297718-20171225200647353-1169901202.png]: /images/20230531/fd86ade0f5764a289964a40e5741b82d.png
[1297718-20171225200656025-241982559.png]: /images/20230531/cc56f55d4a734ef5a95a0c2cd349b6a2.png