一篇文章带你快速入门createjs
- 画图片用(Bitmap)
- 画图形,比如矩形,圆形等用(Shape) 【类似于改变坐标x,y,增加阴影shadow,透明度alpha,缩小放大scaleX/scaleY都可以做到】
- 画文字,用(Text)
- 还有容器Container的概念,容器可以包含多个显示对象
<script src="easeljs-0.7.1.min.js"></script> //引入相关的js文件
<canvas id="canvas"></canvas> var canvas = document.querySelector('#canvas');
//创建舞台
var stage = new createjs.Stage(canvas);
//创建一个Shape对象,此处也可以创建文字Text,创建图片Bitmap
var rect = new createjs.Shape();
//用画笔设置颜色,调用方法画矩形,矩形参数:x,y,w,h
rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
//添加到舞台
stage.addChild(rect);
//刷新舞台
stage.update();
graphics可以设置一些样式,线条宽度,颜色等等,也可以调用一些方法绘制图形,比如矩形drawRect,圆形drawCircle等等,具体可以自己查看api。
createjs.Ticker.setFPS(60);
stage.setChildIndex(red,1);
var contain = new createjs.Container();
contain.addChild(bgImg);
contain.addChild(bitmap);
stage.addChild(contain);
蹬蹬蹬~本篇文章的重点,绘制图像并对图像进行处理
var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();
按照上面的EaselJS的正常的绘制流程来说,上面这段代码应该可以正常显示。但是,只是有些情况下可以正常显示的,这个图像资源需要确定加载成功后才可以new,否则不会有图像在画布上,如果有做资源预加载,可以直接使用上面的代码,如果没有,则需要在image加载完成onload之后才进行绘制
var img = new Image();
img.src = './img/linkgame_pass@2x.png';
img.onload = function () {
var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();
}
仅仅绘制图片是不够的,createjs提供了几种处理图片的方法:
stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;
//遮罩图形
shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
shape.x = 200;
shape.y = 100;
bg.mask = shape; //给图片bg添加遮罩
stage.addChild(shape);
stage.addChild(bg);
stage.update();

6.2 给图片增加滤镜效果
var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];
bg.cache(0,0,bg.image.width,bg.image.height);
6.3 使用Rectangle剪裁图片
使用EaselJS内置的Rectangle对象来创建一个选取框,显示图片的某各部分。
stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;
var rect = new createjs.Rectangle(0, 0, 121, 171);
bg.sourceRect = rect;
stage.addChild(bg);
stage.update();

easeljs事件默认是不支持touch设备的,需要以下代码才支持:
createjs.Touch.enable(stage);
对于Bitmap,Shape等对象,都可以直接使用addEventListener进行事件监听
bitmap = new createjs.Bitmap('');
bitmap.addEventListener(‘click’,handle);
createjs.Ticker.timingMode = createjs.Ticker.RAF;
<canvas id="game" width="750" height="700"></canvas>
注意,以上代码的width,height不同于css中的width,height。
比如,你在canvas内部绘制图片,用x,y轴进行定位,这里的x,y是相对于canvas这个整体。
我们再把canvas当成一整张图片使用css进行适配
canvas{
width: 100%;
}
那么,就会有以下的效果,canvas会适配屏幕尺寸,里面的图片也会等比例变大变小。


一篇文章带你快速入门createjs的更多相关文章
- 一篇文章让你快速入门 学懂Shell脚本
Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的文件进行解析,然后执行这些功能,也可以说Shell脚本就是一系列命令的集合. Shell可以直接使用在win/Unix/Linux上面 ...
- 一篇文章带你了解服务器操作系统——Linux简单入门
一篇文章带你了解服务器操作系统--Linux简单入门 Linux作为服务器的常用操作系统,身为工作人员自然是要有所了解的 在本篇中我们会简单介绍Linux的特点,安装,相关指令使用以及内部程序的安装等 ...
- 一篇文章带你了解网页框架——Vue简单入门
一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...
- 一篇文章带你了解NoSql数据库——Redis简单入门
一篇文章带你了解NoSql数据库--Redis简单入门 Redis是一个基于内存的key-value结构数据库 我们会利用其内存存储速度快,读写性能高的特点去完成企业中的一些热门数据的储存信息 在本篇 ...
- 一篇文章带你了解轻量级Web服务器——Nginx简单入门
一篇文章带你了解轻量级Web服务器--Nginx简单入门 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件代理服务器 在本篇中我们会简单介绍Nginx的特点,安装,相关指令使用以及配置信 ...
- 【转】C#单元测试,带你快速入门
[转]C#单元测试,带你快速入门 注:本文示例环境 VS2017 XUnit 2.2.0 单元测试框架 xunit.runner.visualstudio 2.2.0 测试运行工具 Moq 4.7.1 ...
- 一篇文章带你掌握主流数据库框架——MyBatis
一篇文章带你掌握主流数据库框架--MyBatis MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射. 在之前的文章中我们学习了MYSQL和JDBC,但是这些东西远远不 ...
- 一篇文章带你掌握主流基础框架——Spring
一篇文章带你掌握主流基础框架--Spring 这篇文章中我们将会介绍Spring的框架以及本体内容,包括核心容器,注解开发,AOP以及事务等内容 那么简单说明一下Spring的必要性: Spring技 ...
- 一篇文章带你掌握主流服务层框架——SpringMVC
一篇文章带你掌握主流服务层框架--SpringMVC 在之前的文章中我们已经学习了Spring的基本内容,SpringMVC隶属于Spring的一部分内容 但由于SpringMVC完全针对于服务层使用 ...
随机推荐
- 利用GDB进行多线程调试
一.多线程调试 多线程调试重要就是下面几个命令: info thread 查看当前进程的线程. thread <ID> 切换调试的线程为指定ID的线程. break file.c:100 ...
- 微信公众号开发笔记1(nodejs开发的)
本篇记录了微信公众号开发的一些笔记 一.微信服务器与我们服务器的交流 微信开发者拥有自己的服务器,在我们服务器上可以与微信服务器进行交流.既然可以交流,那就必定需要前提条件(微信认证),也就是说,只有 ...
- sublime Text 3常用Html/Css基础插件安装
前言 sublime以其简洁明了的外观,干脆利落的编辑方式,再加上丰富的功能插件,深受广大开发者的喜爱.今天,我就来介绍几款基于Html/Css开发的sublime插件. 1.Package Cont ...
- 转:Java中的Clone()方法详解
Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象.那 ...
- JDK版本会影响项目部署
最近在公司里面部署javaweb项目的时候,项目启动的时候报错,我使用了各种方法来寻找答案,将近花了很长的时间.就在今天我终于找到了问题的根源,我开始用的是JDK1.8的版本,换了一个1.7版本的JD ...
- APICloud框架——总结一下最近开发APP遇到的一些问题
距离上一次发文都过去十天了, 下班回来懒的就想睡觉, 今天520一个重要的节日, 恩爱已经秀完, 该干点事情了!! 总结一下最近开发遇到的一些问题, 以及解决方案 纯css三角形 /* 没有哪个方向的 ...
- 17、Map接口及其常用子类(Hashtable、HashMap、WeakHashMap)
17.Map接口 Map没有继承Collection接口,Map提供key到value的映射.一个Map中不能包含相同的key,每个key只能映射一个value.Map接口提供3种集合的视图,Map的 ...
- HourRank 19
https://www.hackerrank.com/contests/hourrank-19/challenges 第一题略. 第二题是nim博弈,问删掉一个区间的石子,使得先手败的方案有几种,明显 ...
- 开涛spring3(9.1) - Spring的事务 之 9.1 数据库事务概述
9.1 数据库事务概述 事务首先是一系列操作组成的工作单元,该工作单元内的操作是不可分割的,即要么所有操作都做,要么所有操作都不做,这就是事务. 事务必需满足ACID(原子性.一致性.隔离性和持久性 ...
- Spark学习资料共享
链接相关 课件代码:http://pan.baidu.com/s/1nvbkRSt 教学视频:http://pan.baidu.com/s/1c12XsIG 这是最近买的付费教程,对资料感兴趣的可以在 ...