easelJS - Cache_vday - 相关文章

easelJS - Cache_vday

easelJS - Cache_vday $(function() { init(); }); // Cache_vday var canvas; var stage; var container; var captureContainers; var captureIndex; function init(e) { canvas = document.getElementById('demo1'); stage = new createjs.Stage(canvas); var w = can…

CreateJS第1章 EaselJS基础（画图）

这章学学EaselJS的基本常用API首先下载createjs库,在项目文件里新建一个js文件夹放里面http://code.createjs.com/ 各种形状 var sp = new createjs.Shape(); sp.graphics.f("red").dc(100,100,80);//画圆 //sp.graphics.beginFill("red").drawCircle(100,100,80); sp.graphics.f("red&qu…

在线生成二叉树（基于EaselJS（canvas））

学习二叉树的时候,老在本子上画二叉树好麻烦.其实就想看下树结构.最近html5蛮火的,就用canvas和EaselJS.js(开发flash公司开发的插件)插件实现了个.大家随便用吧. 这是个什么东西呢?其实就是你提供这样一串数组 30,25,19,37,35,40,39,34,22,42,36 输入到input控件中,点击按钮,在canvas生成二叉树画面. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&q…

easelJS入门、事件、spritesheet

easelJS入门.事件.spritesheet <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + req…

easelJS 初始入门

easelJS 初始入门 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServ…

Html5游戏框架createJS组件--EaselJS

CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验. 掌握了CreateJS可以更方便的完成HTML5的游戏开发. CreateJS提供了EaselJS.TweenJS.SoundJS和PreLoadJS四款工具: EaselJS:简化处理HTML5画布 TweenJS:用来帮助调整HTML5和Javascript属性 SoundJS:用来简化处理HTM…

Html5游戏框架createJs组件--EaselJS(二)绘图类graphics

有端友问我是否有文档,有确实有,但没有中文的,只有英文的,先提供浏览地址供大家参考学习createJs英文文档. EaselJS其实主要就是createJs组件中控制canvas绘图的,那么就会涉及密切相关的绘图操作,绘图操作利用Graphics类实现,我们来仔细的研究研究Graphics类. 先回顾一下EaselJS(一里面的那个圆形绘图): <!DOCTYPE HTML> <html lang="en-US">…

Html5游戏框架createJs组件--EaselJS(一)

现在html5小游戏越来越火爆了,由于公司业务的需要,也开发过几款微信小游戏,用canvas写的没有利用什么框架,发现性能一直不怎么好,所以楼主就只能硬着头皮去学习比较火的Adobe公司出的CreateJS框架,找了很久资料比较少,基本没什么中文文档,很多都是英文文档(想想我这才过四级,只能借用有道,一点一点看,一点一点翻译学习),今天我就写个引子(也是在慢慢学习),写的不好,大家就不要见笑. EaselJS是CreateJS Suite中的一个js库,它可以让canvas的使用变得简单,它提…

1、CreateJS介绍-EaselJS

需要在html5文件中引入的CreateJS库文件是easeljs-0.7.1.min.js HTML5文件如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1.CreateJS介绍-EaselJS</title> <script src="easeljs-0.7.1.min.js&…

canvas 动画库 CreateJs 之 EaselJS（下篇）

本文来自网易云社区作者:田亚楠继承对应原文:Inheritance 我们可以继承已有的「显示对象」,创建新的自定义类.实现方法有很多种,下面介绍其中之一. 举例:实现一个继承于 Container 类的自定义类 Button: 共分 4 步: 自定义构造器继承父类,获得父类的功能重写已有方法,扩展自身方法 promote 继承来的方法,返回自定义类 (function () { // 自定义构造器 // - 调用继承的父类构造器() // - label 为自…

canvas 动画库 CreateJs 之 EaselJS（上篇）

本文来自网易云社区作者:田亚楠须知本文主要是根据 createjs 中的 EaselJS 在 github 上的 tutorials 目录下的文章整理而来 (原文链接),同时也包含了很多本人的理解,如过有叙述不当的地方,请联系我 :-D 本文对原文中的一些知识点的解释进行了删减,对另外一些进行了扩展,同时对文中的 demo 进行了改写,如果感到阅读困难的话请参考原文(本文中有对应的原文链接) 如果文中提供的 demo 无法打开,可以参考原文中的 demo. 从一个简单例子开始对应原文:G…

createjs 入门之EaselJs 绘制图片Bitmap

var canvas=document.getElementById('demoCanvas'); canvas.width=window.innerWidth; canvas.height=window.innerHeight; var stage=new createjs.Stage('demoCanvas'); var container=new createjs.Container();//绘制外部容器 stage.addChild(container); //加载图片 var imag…

20款 JavaScript 开发框架推荐给前端开发者

下面,我们给大家提供了一个用于 HTML5 开发的各种用途的 JavaScript 库列表.这些框架能够给前端开发人员提供更好的功能实现的解决方案.如果你有收藏优秀的框架,也可以在后面的评论中分享给我们. 您可能感兴趣的相关文章期待已久的2013年度最佳 jQuery 插件揭晓小伙伴们都惊呆了!8个超炫的 Web 效果 10大流行的 Metro UI 风格 Bootstrap 主题推荐35款精致的 CSS3 和 HTML5 网页模板精选12款优秀 jQuery Ajax 分页插件和教程…

swing with transformjs

Antecedent Facebook made a HTML5 game long time ago. The opening animation is a piece of software that is similar to tofu, the effect as shown below gif: Facebook was using easeljs and tweenjs of createjs to produce, based on the Canvas animation. Th…

和transformjs一起摇摆

写在前面记得以前facebook做过一款HTML5游戏.开场动画是一块软体类似豆腐的东西一起摇摆.类似的效果如下面的gif所示: facebook当时使用的是createjs下的子项目easeljs和tweenjs去制作,基于Canvas的动画.基本的原理主要是:循环运动Canvas抽象的DisplayObject的skewX和scaleY来实现软体摇摆. 目前来看transformjs也能做到,因为transformjs也能运动skewX和scaleY.先来看看facebook的方式. tw…

js库

lanchpad用的js库 http://lesscss.org/ https://github.com/EightMedia/hammer.js/wiki/Getting-Started http://iscrolljs.com/ http://modernizr.com/docs/ http://www.greensock.com/get-started-js/ http://createjs.com/#!/EaselJS…

一张H5游戏页引起的思考

最近开发了一个移动端的端午活动页面,做完后就想写点东西总结一下,感受最深的就是打草稿. 刚开始并没有打草稿,直接开干,越做到后面就越觉得代码很乱很杂,非常不舒服,做到哪个页面写这个页面的CSS,没有大局观. 在完成页面后,就思考了一下,觉得打草稿是个好习惯,磨刀不误砍柴工. 打草稿的步骤如下: 1)margin.padding的大致值记录 2)字体的配色与尺寸 3)图片的切割,哪些比较适合单个的切割,哪些比较适合合成起来 4)通用组件的提取,包括按钮.弹出层.Loading.输入框.以及表格 5…

制作动画或小游戏——CreateJS事件（二）

在Canvas中如果要添加事件,就需要计算坐标来模拟各种事件,而EaselJS中已经封装好了多个事件,只需调用即可. 一.事件 1)点击事件是绑定在Shape类中的,click事件与DOM中的意思是一样的,还有个双击事件dblckick,完整的代码可以查看这里. var object = new createjs.Shape(); object.addEventListener('click', function(e) { alert('click'); }); 可以用addEventList…

transfromjs动画效果

记得以前facebook做过一款HTML5游戏.开场动画是一块软体类似豆腐的东西一起摇摆.类似的效果如下面的gif所示: facebook当时使用的是createjs下的子项目easeljs和tweenjs去制作,基于Canvas的动画.基本的原理主要是:循环运动Canvas抽象的DisplayObject的skewX和scaleY来实现软体摇摆.目前来看transformjs也能做到,因为transformjs也能运动skewX和scaleY.先来看看facebook的方式. tweenjs…

10个最好的 JavaScript 动画库和开发框架

虽然 CSS3 动画功能能够让我们以简单轻松的方式实现动画效果,但是浏览器兼容性问题让人头疼.不过不用担心,我们还有另外的武器——JavaScript,它同样可以帮助你实现各种各样的动画效果,而且借助已有的动画库和框架,也能够让你快速开发. 这篇文章挑选了个人认为最好的15个 JavaScript 动画库和开发框架,相信其中一定会有一款是适合你的. 您可能感兴趣的相关文章期待已久的2013年度最佳 jQuery 插件揭晓小伙伴们都惊呆了!8个超炫的 Web 效果 10大流行的 Metro U…

[读码]HTML5像素文字爆炸重组

[边读码,边学习,技术也好,思路也罢] [一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒.] 一开始想着,怎么在一个Canvas里获取文字的像素点位置.还是说,有专门的Api获取文字的位置.结果看了代码才发现,原来是用了那么个巧妙的办法[巧妙而超级简单].也就是说,所有的图片,都可以动态的用点来画出来了.虽然说,扫描canvas的做法效率不高,但是似乎也只能这样了. ---大…

HTML5游戏开发引擎,初识CreateJS

CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎.打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术.你可以通过这个网站学习如何构建跨平台和跨终端游戏.这个资源库还会告诉你如何构建多人在线游戏.CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,旨在降低 HTML5 项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验. v准备工作 1.进入createjs首页: 首页有几个tab页,有EASEJS.Tw…

Canvas 画布小案例

HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

Spine做骨骼动画是比较流行的,使用起来可能相对复杂,但功能毕竟强大,所以市场占有率较大. 在unity.cocos2d.starling中使用spine已经很成熟了,而HTML5这一块可能刚刚起步,暂时spine对这一块也没有做得非常完善. 整理了一下,找了一些比较好的方法,分享一下. createjs 这是HTML5动画引擎比较好用,也比较小的一个,如果项目纯碎为了播放骨骼动画,而不是一个游戏,强烈推荐用这个.缺点是对webgl支持不好,官方也没什么动作去做好webgl的支持. 代码比较复…

CreateJSのTweenJS、SoundJS、PreloadJS

TweenJS基础实例: var canvas = document.getElementById('myCanvas'), stage = new createjs.Stage(canvas); var stageWidth = canvas.width; var stageHeight = canvas.height; var characterWidth = 75; var characterHeight = 96; var spritesheet; var charactor; wind…

CreateJSのeasel.js（一）

CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎. EaselJS 一个JavaScript库,使HTML5 Canvas标签变得更简单. 用于创建游戏,生成艺术作品,和处理其他高级图形化等有着很友好的体验. 上下左右绘制文字 <!DOCTYPE html> <html> <head> <meta cha…

[算法][包围盒]球，AABB，OBB

参考地址请看图片水印:http://www.cnblogs.com/iamzhanglei/archive/2012/06/07/2539751.html http://blog.sina.com.cn/s/blog_6a1bf1310101g7zy.html 包围体是一个简单的几何空间,里面包含着复杂形状的物体.为物体添加包围体的目的是快速的进行碰撞检测或者进行精确的碰撞检测之前进行过滤(即当包围体碰撞,才进行精确碰撞检测和处理).包围体类型包括球体.轴对齐包围盒(AABB).有向包围盒(OB…

设计师必看的10个HTML5动画工具

如果你想用令人难以置信的动画创建引人注目的网站的话,那么这里为设计师精心挑选了一些必备的HTML5动画工具.HTML5是设计师用来打造时尚网站的最流行的编程语言之一.在过去三年内,这种编程语言的使用人数急剧增长.开发人员可以使用这种语言来创建各种改进的内容并放到万维网上.随着每一个新版本的发布,HTML通过更好的功能和技术渐渐占据了制高点. HTML5使用起来非常方便,并且能够提供多种功能.例如内置的视觉元素,指定的结构标记,互动的拖放功能等.开发人员可以利用这些功能来创建充满吸引力的网站.此外…

20款最受欢迎的HTML5游戏引擎收集

在“最火HTML5 JavaScript游戏引擎”系列文章国外篇(一)中,我们盘点了当下备受开发者推崇的非国产HTML5和JavaScript游戏引擎.在各种2D小游戏逆袭的今天,用HTML5和JavaScript进行游戏开发成为了一大潮流,而HTML5和JavaScript游戏引擎也逐渐走向了成熟,在追求原生体验的同时,也深逐精致细腻狂炫酷拽.在本文中,我们将继续介绍来自国外,非常受开发者欢迎的HTML5和JavaScript游戏引擎. 1. melonJS melonJS这款轻量级的开源免费…

AIR 3.0针对移动设备的高性能渲染方案

转自:http://blog.domlib.com/articles/242.html 当我们一边正在等待Stage3D的发布时,很多开发者似乎还停留在这个印象中:即使AIR 3.0也无法在移动设备上开发出高性能的游戏. 而事实上,只需要做一点点的工作,高性能的GPU加速功能已经为我们敞开了大门! 在这片文章中,我将为您展示跟传统显示列表编程方式相比,能提升5倍以上的性能的优化方案.最终成果将会是一个用IOS5硬件加速的性能更高的渲染引擎(这点在后文跟进…). 本文说的啥…

【easelJS - Cache_vday】的更多相关文章