前端想做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这个东西有点熬人,多用,多看才会明白其中的意思。

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

前端要怎么学createjs!!!???的更多相关文章

  1. web前端入坑第二篇:web前端到底怎么学?干货资料! 【转】

    http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...

  2. 第十四章 web前端开发小白学爬虫

    老猿从事IT开发快三十年了,接触互联网也很久了,但自己没有做过web前端开发,只知道与前端开发相关的一些基本概念,如B/S架构.html标签.js脚本.css样式.xml解析.cookies.http ...

  3. Web前端入门必学知识

    入门主要有三个部分   一.html+css部分:      1.前端的入门门槛极低,体现在HTML和CSS上运行环境就是浏览器,html+css这部分特别简单,网上搜资料,书籍视频非常多.css中盒 ...

  4. 前端教你学UI——人物处理(一)

    一.序言 本文作为本系列的第一篇写UI的文章,开头还是有必要申明一些东西的,本系列主要是为了作为博主在前端工作之余学习UI的一个记录,同时为了让更多的同行学习到一些编程之外的其他东西.所以本文会尽可能 ...

  5. 对于一个WEB前端初学者,学前端应该注意,有什么技巧

    web前端经验总结需要注意的地方和技巧如下: 1.编程思维 学习web前端开发核心在于一个“编程思维”,因为每段代码都不一样,都需要分别去看,所以只要你掌握了学习web前端的编程思维,那么写程序对于你 ...

  6. 【转】web前端到底怎么学?干货资料!

    一般据我经验,在喜欢并且决定和她恋爱之前,我都会做一下充分准备和调查,有必要了解和研究清楚 ‘她’ 的几个特性和习惯 web前端的基本工作职责 和基础技能(要清楚) web前端的分类和门派(简要概述, ...

  7. 前端要不要学数据结构&算法

    我们都知道前端开发工程师更多偏向 DOM 渲染和 DOM 交互操作,随之 Node 的推广前端工程师也可以完成服务端开发.对于服务端开发而言大家都觉得数据结构和算法是基础,非学不可.所以正在进行 No ...

  8. 为什么43%前端开发者想学Vue.js

    根据JavaScript 2017前端库状况调查 Vue.js是开发者最想学的前端库.我在这里说明一下我为什么认为这也是和你一起通过使用Vue构建一个简单的App应用程序的原因. 我最近曾与Evan ...

  9. Web前端基础怎么学? JavaScript、html、css知识架构图

    以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...

随机推荐

  1. magento 修改 paypal order product name

    app/code/core/Mage/Sales/Model/Quote  Item.php public function setProduct($product) { if ($this-> ...

  2. POJ Wormholes 3259

    题目描述: Farmer John 在探索农场的时候 惊奇的发现一些虫洞,虫洞是一个特殊的东西,他是一个单向通道,他能到达虫洞的另一端, 可以穿越到达之前的时间.Farmer John 的由N个农场组 ...

  3. Bloom Filter(布隆过滤器)

    布隆过滤器用于测试某一元素是否存在于给定的集合中,是一种空间利用率很高的随机数据结构(probabilistic data structure),存在一定的误识别率(false positive),即 ...

  4. mysql 安装截图

    这里有3个选项, 1.Developer Machine(开发机器),个人用桌面工作站,占用最少的系统资源 2.Server Machine(服务器),MySQL服务器可以同其它应用程序一起运行,例如 ...

  5. app开发历程————服务器端生成JSON格式数据,采用Unicode编码,隐藏中文

    今天,问以前的同事,他们写接口按什么编码,怎么看到有\u的一些看不懂的内容,一问,原来是信息隐藏,防止信息泄漏. 然后在网上查了Java如何把中文转换成unicode编码,转自:http://blog ...

  6. oracle-TNS是什么?

    oracle 的 TNS 是什么的缩写?Transparent Network Substrate(透明网络底层,即无论底层的网络层用什么协议对于上层的应用层都是透明的,也即上层的应用层不用关心底层的 ...

  7. hyperv虚拟机网络速度慢问题的解决办法

    服务器安装了windows2012R2进行虚拟化,虚拟机也是用的是windows2012R2的操作系统,这样可以一次激活对应的虚拟机. 在使用虚拟机的过程中发现问题,虚拟机主机的网速正常,无论是ftp ...

  8. jsp 常用9大内置对象

    |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| ...

  9. android 反纠结app开发: 在线程中更新view

    大体上想实现一个思路: 对一个view 的内容进行不停地变化, 通过按钮停止这种变化,以达到随机选择的目的. 开发过程中 使用textview 模拟,  建立线程 mythread = new Thr ...

  10. UI几个重要使用方法

    using UnityEngine; using System.Collections; using UnityEngine.SceneManagement; public class Applica ...