Canvs循环滚动图像

最新推荐文章于 2023-03-23 14:34:04 发布

淘人居士

最新推荐文章于 2023-03-23 14:34:04 发布

阅读量656

点赞数

分类专栏：源码分享文章标签： canvas html5

本文链接：https://blog.csdn.net/kw269937519/article/details/107223473

版权

源码分享专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文将介绍使用canvas绘图API进行循环滚动图像。

技术要点：
1.动态局部裁切图像
2.图像首位拼接

完整代码

<!DOCTYPE html>
<html>

<head>
    <title>循环滚动图片，loop scroll image</title>
</head>

<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
        var img = new Image();
        //此处用到的图片是1920x1080尺寸的
        img.src = "img.jpg";
        img.onload = function() {
            drawImage();
            setInterval(function() {
                frame++;
                if (frame > 192) {
                    frame = 0;
                }
            }, 50);
        }
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        //横向帧计数，horizontal frame count
        var frame = 0;
        var animeid = 0;
        //图像缩放比例，image scale rate
        var rate_w = 600 / 1080;

        function drawImage() {
            context.clearRect(0, 0, context.canvas.clientWidth, context.canvas.clientHeight);
            //每帧绘制原图像120*1080的区域
            context.drawImage(img, frame * 10, 0, 120, 1080, 400, 0, 120 * rate_w, 600);
            //图像即将滚动到尾部时，开始绘制图像的头部
            if (frame >= 180) {
                var cw = (192 - frame) * 10;
                context.drawImage(img, 0, 0, 120 - cw, 1080, 400 + cw * rate_w, 0, (120 - cw) * rate_w, 600);
            }
            animeid = requestAnimationFrame(drawImage);
        }
    </script>
</body>

</html>

效果演示页面

参考资料
drawImage参数说明