zoukankan      html  css  js  c++  java
  • 前端要怎么学createjs!!!???

    前端想做js开发,可以。但是思维要变通,思维要重塑。为啥?因为被div+css坑的有点深。这些都是我自己总结的,不知道其他人是不是这样。

    在我看来div+css算是开发吗?肯定不是,这些东西有难的东西吗?有。很难吗?不是。但是要用到js之后,好多前端都在挠头(我头发都快掉完了)。

    为什么,因为我们用的js大部分都是在操作dom,滚动啊,显示隐藏啊。这些在js里是比较简单的了。js的能做的事还有好多。随着HTML5的canvas

    崛起,对前端的js能力要求是越来越高。明显显示隐藏就不够用了。我们要处理数据,要给后来留出接口的位置。唉!总之,书到用时方恨少!

    学createjs怎么办,这个很好用的canvas的js库怎么玩的很溜。网上好多都是大神的createjs的讲解,但是都是按部就班  

    我觉得可以按我们做前端的流程来学习一下,也不是不可以。我们先不学画圆,画方。按前端思想写了就出来的想法。

    我们做前端一开始有个预加载吧!createjs里有一个类库perload.js。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>BlurFilter</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    
    <body>
        <div id="box"></div>
        <canvas id="test" width="800px" height="800px"></canvas><!--默认宽高,不要用css设置,会被拉伸-->
        <script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
        <script>
        init();
        var stage;
        var mainfest;
        var load;
    
        function init() {
            stage = new createjs.Stage("test");
    
            mainfest = [{
                "src": "car1.jpg",
                id: "car1"
            },{
                "src": "car2.jpg",
                id: "car2"
            },{
                "src": "car3.jpg",
                id: "car3"
            },{
                "src": "car4.jpg",
                id: "car4"
            },{
                "src": "car5.jpg",
                id: "car5"
            },{
                "src": "car6.jpg",
                id: "car6"
            },{
                "src": "car7.jpg",
                id: "car7"
            },{
                "src": "car8.jpg",
                id: "car8"
            },{
                "src": "car9.jpg",
                id: "car9"
            },{
                "src": "car10.jpg",
                id: "car10"
            },{
                "src": "car11.jpg",
                id: "car11"
            },{
                "src": "car12.jpg",
                id: "car12"
            },{
                "src": "car13.jpg",
                id: "car13"
            },{
                "src": "car14.jpg",
                id: "car14"
            },{
                "src": "car15.jpg",
                id: "car15"
            },{
                "src": "car16.jpg",
                id: "car16"
            },{
                "src": "car17.jpg",
                id: "car17"
            },{
                "src": "car18.jpg",
                id: "car18"
            },{
                "src": "car19.jpg",
                id: "car19"
            },{
                "src": "car20.jpg",
                id: "car20"
            },]
             
            loader = new createjs.LoadQueue(false);
            loader.addEventListener("progress", loadprogress);
            loader.loadManifest(mainfest,true,"images/");
            loader.addEventListener("complete", listener)
        };
    
        function loadprogress(e){
            var per = e.loaded;
            var box = document.getElementById("box");
            box.innerHTML = per;
        };
    
        function listener(){
            var bitmap = new createjs.Bitmap(loader.getResult("car1"));
    
    
            stage.addChild(bitmap);
    
            createjs.Ticker.addEventListener("tick", stage);
    
        }
        </script>
    </body>
    
    </html>

    这样来看是不是有点想法,这个没有想的那么难,只不过我之前是想多。

    js这个东西有点熬人,多用,多看才会明白其中的意思。

    (技术不好,只为记录成长)

  • 相关阅读:
    过滤器,拦截器,监听器的区别
    Spring中的@Transactional(rollbackFor = Exception.class)属性详解
    java进阶知识--JAVA锁
    java进阶知识--23种设计模式
    java进阶知识--初识Jedis
    java进阶知识--初识redis
    java进阶知识--Nginx安装与部署
    java进阶知识--Nginx代理
    Linux常用命令
    Linux权限管理
  • 原文地址:https://www.cnblogs.com/BATAKK/p/5464611.html
Copyright © 2011-2022 走看看