zoukankan      html  css  js  c++  java
  • 微信小游戏滚动参考

    <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就是采用这种模式。

  • 相关阅读:
    【爬坑】在 IDEA 中运行 Hadoop 程序 报 winutils.exe 不存在错误解决方案
    【爬坑】Vim 文档加密 & 解密
    Maven 安装配置
    2014/11/23 条件查询
    2014/11/21
    2014/11/20 SQL简单命令
    2014/11/19 SQL Server基础
    7、数组
    6、循环、跳转、异常语句,string类、math、datetime
    5、循环语句、穷举
  • 原文地址:https://www.cnblogs.com/honghong87/p/11284481.html
Copyright © 2011-2022 走看看