微信小游戏滚动参考

<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>

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

save, restore是什么鬼东西?先不谈

有个需求,需要旋转画布30度, 画一个圆，恢复到开始的状态，再画一个圆? 你可先旋转，画图，再旋转，画图...

随着需求变复杂, 旋转30度, 宽度拉伸, 带stroke，画一个圆，恢复开始状态,再画一个圆?这个勉强可实现，代码很多很多

如果状态嵌套的话，实现起来就状大了。

要你设计的话，你会怎么设计?我能想到的就是 后进先出的模式来储存有状态 save,restore就是采用这种模式。