前端要怎麼學createjs！！！？？？

時間 2019-12-12

標籤前端怎麼 createjs 简体版

原文原文鏈接

前端想作js開發，能夠。可是思惟要變通，思惟要重塑。爲啥？由於被div+css坑的有點深。這些都是我本身總結的，不知道其餘人是否是這樣。css

在我看來div+css算是開發嗎？確定不是，這些東西有難的東西嗎？有。很難嗎？不是。可是要用到js以後，好多前端都在撓頭（我頭髮都快掉完了）。html

爲何，由於咱們用的js大部分都是在操做dom，滾動啊，顯示隱藏啊。這些在js裏是比較簡單的了。js的能作的事還有好多。隨着HTML5的canvas前端

崛起，對前端的js能力要求是愈來愈高。明顯顯示隱藏就不夠用了。咱們要處理數據，要給後來留出接口的位置。唉！總之，書到用時方恨少！canvas

學createjs怎麼辦，這個很好用的canvas的js庫怎麼玩的很溜。網上好多都是大神的createjs的講解，可是都是循序漸進　　dom

我以爲能夠按咱們作前端的流程來學習一下，也不是不能夠。咱們先不學畫圓，畫方。按前端思想寫了就出來的想法。學習

咱們作前端一開始有個預加載吧！createjs裏有一個類庫perload.js。spa

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