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").dr(200,10,300,180);//方块
//sp.graphics.beginFill("red").drawRect(200,10,300,180); sp.graphics.s("blue").ss(5).mt(0,200).lt(1000,200).es();//线 sp.graphics.f("red").rr(10,250,100,110,15);//圆角矩形 sp.graphics.f("red").de(120,250,100,110,15);//椭圆 sp.graphics.f("red").dp(240, 250, 40, 5, 0.6, -90);//星星 var img=new Image();
img.src="http://www.airmn.com/blog/wp-content/uploads/2014/08/jinbi.jpg";
img.onload=function(){
//alert("imgLoadOK!!")
sp.graphics.beginBitmapFill(img);
sp.graphics.drawCircle(400,300,100);
//sp.shadow = new createjs.Shadow("#B1820C",0,0,20);
stage.update();
} stage.addChild(sp);
综合练习:
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/createjs.js" ></script>
</head>
<body>
<canvas id="canvas" width="1000" height="500">你的浏览器太古董了。。。。</canvas>
<script type="text/javascript">
var stage
var hw //画布中间x坐标
var hh //画布中间y坐标
function init(){
stage = new createjs.Stage("canvas");
hw = stage.canvas.width/2;
hh = stage.canvas.height/2;
begin();
stage.update();
}
//开始
function begin(){
var sp = new createjs.Shape();
//背景
sp.graphics.beginFill("rgba(254,241,103,1)").drawCircle(hw,hh,80);
//渐变
sp.graphics.beginLinearGradientFill(["rgba(254,241,103,0.5)","rgba(227,144,2,0.5)"],[0,1],hw,hh-40,hw,hh+40).drawCircle(hw,hh,80);//beginLinearGradientFill最后这几个参数是相对画布的左上角
//外环
sp.graphics.setStrokeStyle(15).beginStroke("#FFF164").drawCircle(hw,hh,80);
sp.shadow = new createjs.Shadow("#B1820C",0,0,20);
//符号
var tt = new createjs.Text("$","100px Arial","#FFF164");
tt.x=hw-27;
tt.y=hh-55;
tt.shadow = new createjs.Shadow("#B1820C",0,0,10)
stage.addChild(sp);
stage.addChild(tt);
} init()
</script>
</body>
</html>
其中对Graphics的操作可以简写
Tiny | Method | Tiny | Method |
mt | moveTo | lt | lineTo |
a/at | arc / arcTo | bt | bezierCurveTo |
qt | quadraticCurveTo (also curveTo) | r | rect |
cp | closePath | c | clear |
f | beginFill | lf | beginLinearGradientFill |
rf | beginRadialGradientFill | bf | beginBitmapFill |
ef | endFill | ss | setStrokeStyle |
s | beginStroke | ls | beginLinearGradientStroke |
rs | beginRadialGradientStroke | bs | beginBitmapStroke |
es | endStroke | dr | drawRect |
rr | drawRoundRect | rc | drawRoundRectComplex |
dc | drawCircle | de | drawEllipse |
dp | drawPolyStar | p | decodePath |
sp.graphics.beginLinearGradientFill(["rgba(254,241,103,0.5)","rgba(227,144,2,0.5)"],[0,1],hw,hh-40,hw,hh+40).drawCircle(hw,hh,80);
等于
sp.graphics.lf(["rgba(254,241,103,0.5)","rgba(227,144,2,0.5)"],[0,1],hw,hh-40,hw,hh+40).dc(hw,hh,80);
CreateJS第1章 EaselJS基础 (画图)的更多相关文章
- CreateJS第0章- Canvas基础
最近网页游戏比较火,以前做过一些小游戏,但是过段时间就都忘了,今天在这里记录一下学习过程,以备后用.做网页游戏有很多种框架,我是flash程序用Adobe出品的CreateJS最容易.基本上继承了fl ...
- 《利用python进行数据分析》读书笔记--第四章 numpy基础:数组和矢量计算
http://www.cnblogs.com/batteryhp/p/5000104.html 第四章 Numpy基础:数组和矢量计算 第一部分:numpy的ndarray:一种多维数组对象 实话说, ...
- java面向对象编程——第二章 java基础语法
第二章 java基础语法 1. java关键字 abstract boolean break byte case catch char class const continue default do ...
- 《零成本实现Web自动化测试--基于Selenium》第一章 自动化测试基础
第一篇 Selenium 和WebDriver工具篇 第一章 自动化测试基础 1.1 初识自动化测试 自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...
- 【windows核心编程】 第六章 线程基础
Windows核心编程 第六章 线程基础 欢迎转载 转载请注明出处:http://www.cnblogs.com/cuish/p/3145214.html 1. 线程的组成 ① 一个是线程的内核 ...
- [Python笔记][第一章Python基础]
2016/1/27学习内容 第一章 Python基础 Python内置函数 见Python内置函数.md del命令 显式删除操作,列表中也可以使用. 基本输入输出 input() 读入进来永远是字符 ...
- 第一章 jQuery基础
第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...
- 0003.5-20180422-自动化第四章-python基础学习笔记--脚本
0003.5-20180422-自动化第四章-python基础学习笔记--脚本 1-shopping """ v = [ {"name": " ...
- web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
随机推荐
- php 文本框里面显示数据库调出来的资料
php 文本框里面显示数据库调出来的资料,,,在里面我标注了,,那个地方为什么是!=才能显示正确的数据库资料啊?我理解的是对比正确输出数据库内容的.大师貌似不知道为什么就写错了 <html> ...
- jQuery自定义多选下拉框
项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如 ...
- CSS3弹性盒模型之Flexbox是布局模块box-sizing & box-orient & box-direction & box-ordinal-group
css3 box-sizing属性 box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,bord ...
- ORACLE EXP命令
本文对Oracle数据的导入导出 imp ,exp 两个命令进行了介绍, 并对其对应的參数进行了说明,然后通过一些演示样例进行演练,加深理解.文章最后对运用这两个命令可能出现的问题(如权限不够,不同o ...
- hdu 4742 Pinball Game 3D 分治+树状数组
离散化x然后用树状数组解决,排序y然后分治解决,z在分治的时候排序解决. 具体:先对y排序,solve(l,r)分成solve(l,mid),solve(mid+1,r), 然后因为是按照y排序,所以 ...
- android中解析文件的三种方式
android中解析文件的三种方式 好久没有动手写点东西了,最近在研究android的相关技术,现在就android中解析文件的三种方式做以下总结.其主要有:SAX(Simple API fo ...
- Swift学习笔记八:枚举
1. 枚举语法 1)枚举的定义 使用enum关键词而且把它们的整个定义放在一对大括号内: enum SomeEumeration { // enumeration definition go ...
- 【网络通信】服务器端Socket监听80端口,建立连接传输数据时也是使用的80端口么?
1. 服务器端Socket监听80端口,建立连接传输数据时也是使用的80端口么? 答:对.建立连接时服务器会分配一个新的Socket,但是用的源端口号还是80端口.套接字是由协议类型.源IP.目的IP ...
- iOS流布局UICollectionView使用FlowLayout进行更灵活布局
一.引言 前面的博客介绍了UICollectionView的相关方法和其协议中的方法,但对布局的管理类UICollectionViewFlowLayout没有着重探讨,这篇博客介绍关于布局的相关设置和 ...
- Ant学习笔记(2) 在Eclipse中使用Ant
Eclipse默认提供了对Ant的支持,在Eclipse中不需要安装任何插件就能直接编辑和运行Ant.Eclipse中包含了一个Ant脚本编辑器,Ant脚本编辑器提供了对Ant脚本的语法搞来高亮.自动 ...