微信小游戏滚动参考

Posted 2022-06-03 honghong87

<div id="a"></div>
<script type="text/javascript">
    (function() 
        var canvas = document.createElement(‘canvas‘),
        a = document.getElementById(‘a‘);
        canvas.id = ‘c‘;
        canvas.width = 1024;
        canvas.height = 500;
        a.appendChild(canvas);

        var c = document.getElementById(‘c‘),
        ctx = canvas.getContext(‘2d‘),
        img = new Image(),
        offset = 0,
        fps = 60,
        speed = 80 / fps;
        img.src = "http://images2015.cnblogs.com/blog/428166/201606/428166-20160601185822492-784719690.jpg";

        function draw(ctx) 
            ctx.save();
            offset = offset < c.width ? (offset + speed) : (offset - c.width);
            ctx.translate(-offset, 0);
            ctx.drawImage(img, 0, 0);
            ctx.drawImage(img,img.width,0);
            ctx.restore();
        

        window.onload = function() 
            (function() 
                ctx.clearRect(0, 0, c.width, c.height);
                draw(ctx);
                requestAnimationFrame(arguments.callee, c);
            )();
        ;
)();
</script>

受了点启发,微信开放域的排行榜滚动，不想用原生的。准备简单实现。