Canvas 图片制作动画

最新推荐文章于 2023-06-28 08:49:04 发布

#老程

最新推荐文章于 2023-06-28 08:49:04 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： canvas

老程出品

本文链接：https://blog.csdn.net/LuckKing0925/article/details/118390749

版权

前端专栏收录该内容

27 篇文章 2 订阅

订阅专栏

Canvas入门文档推荐

菜鸟教程
 W3cschool

这个是做的其中一个动画，只是html案例，后来做了十个添加到项目里面了，另外实现了暂停、继续、背景音乐同步播放/同步暂停、最后还将动画转成了视频并合成了音乐实现上传下载；
（rg:下面的是es5语法，再严格模式下不能使用，需要稍微改造下）

<!DOCTYPE html>
<html>

<head>

    <title>老程-Canvas-旋转过渡</title>
    <style type="text/css">
        .out-div {
            text-align: center;
            padding-top: 30px;
        }

        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="out-div">
        <canvas id="player" width="400" height="400">Your browser does not support the HTML5 canvas tag.</canvas>
    </div>
    <script>
        //图片数组
        var imgList = ["https://img.alicdn.com/bao/uploaded/i2/813529278/O1CN01Civq0P2IPNCmhRuKS_!!0-item_pic.jpg",
            "https://img.alicdn.com/bao/uploaded/i2/813529278/O1CN01iCxNOs2IPNCn4jyLf_!!0-item_pic.jpg",
            "https://img.alicdn.com/bao/uploaded/i4/813529278/O1CN01WvBYgD2IPNCqyAEWE_!!0-item_pic.jpg",
            "https://img.alicdn.com/bao/uploaded/i4/813529278/O1CN019jRGzx2IPNCqPBmjA_!!0-item_pic.jpg"
        ];
        //特效分析，动画分两段
        // 1、前一张图片放大
        // 2、第二张图片旋转放大进场（逆时针）
        function rotate() {
            var canvas = document.getElementById('player');
            ctx = canvas.getContext('2d');
            var width = canvas.width,
                height = canvas.height;
            var moveY = 1;

            function animation(img1, img2, callback) { //外方法
                moveY = -moveY
                var enlarge = 1.0;
                (function () { //内方法

                    let h1 = img1.height
                    let w1 = img1.width
                    let h2 = img2.height
                    let w2 = img2.width

                    if (enlarge >= 1.1) { //第二部分动作：第二张图片进场 （从上往下/从下往上）
                        var rotate = 0;
                        var dot = {
                            x: 100,
                            y: 100
                        };
                        var elg = 0.5;
                        (function () {
                            if (rotate >= 360 -14.4) {
                                return callback(); //回调外方法
                            }
                            rotate += 3.6*4;
                            dot.x -= 4;
                            dot.y -= 4;
                            elg += 0.02;
                            ctx.clearRect(0, 0, width, height);
                            ctx.drawImage(img1, 0, 0, w1, h1, 0, 0, width, height);
                            ctx.save()
                            let dotTemp={
                                x:dot.x+width * elg/2,
                                y:dot.y+height * elg/2
                            }
                            ctx.translate(dotTemp.x, dotTemp.y);
                            ctx.rotate(rotate * Math.PI / 180);
                            ctx.translate(-dotTemp.x, -dotTemp.y);
                            ctx.drawImage(img2, 0, 0, w2, h2, dot.x, dot.y, width * elg, height * elg)
                            ctx.restore()
                            setTimeout(arguments.callee, 40); //回调内方法
                        })();

                    } else { //第一部分动作：前一张图片放大
                        ctx.save();
                        ctx.scale(enlarge, enlarge);
                        enlarge += 0.002
                        ctx.drawImage(img1, 0, 0, w1, h1, -width * (enlarge - 1) / 2, -height * (enlarge - 1) / 2,
                            width, height);
                        ctx.restore();
                        setTimeout(arguments.callee, 40); //回调内方法
                    }
                })();
            }
            var i = 0;
            (function () {
                animation(imgList[i], imgList[i += 1] || imgList[i = 0], arguments.callee);
            })();
        }


        //--------------------------------------------------------------------------------------------------------------------------------------------
        var imgLoaded = 0;
        var onload = function () { //加载网络图片
            imgLoaded++;
            if (imgLoaded == imgList.length) {
                rotate(); //全部加载完成调用动画
            };
        }
        for (var i = imgList.length; i--;) {
            var img = new Image(); // 创建一个<img>元素
            img.addEventListener('load', onload)
            img.src = imgList[i]; // 设置图片源地址
            imgList[i] = img; //加载完成后数组直接存图片对象
        }
    </script>
</body>

</html>

这个动画的效果如下
在这里插入图片描述
项目功能思路整理

#老程

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Canvas 图片制作动画

Canvas入门文档推荐菜鸟教程W3cschool这个是做的其中一个动画，只是html案例，后来做了十个添加到项目里面了，另外实现了暂停、继续、背景音乐同步播放/同步暂停、最后还将动画转成了视频并合成了音乐实现上传下载；（rg:下面的是es5语法，再严格模式下不能使用，需要稍微改造下）<!DOCTYPE html><html><head> <title>老程-Canvas-旋转过渡</title> <sty
复制链接

扫一扫