这章学学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基础 （画图）的更多相关文章

  1. CreateJS第0章- Canvas基础

    最近网页游戏比较火,以前做过一些小游戏,但是过段时间就都忘了,今天在这里记录一下学习过程,以备后用.做网页游戏有很多种框架,我是flash程序用Adobe出品的CreateJS最容易.基本上继承了fl ...

  2. 《利用python进行数据分析》读书笔记--第四章 numpy基础：数组和矢量计算

    http://www.cnblogs.com/batteryhp/p/5000104.html 第四章 Numpy基础:数组和矢量计算 第一部分:numpy的ndarray:一种多维数组对象 实话说, ...

  3. java面向对象编程——第二章 java基础语法

    第二章 java基础语法 1. java关键字 abstract boolean break byte case catch char class const continue default do ...

  4. 《零成本实现Web自动化测试--基于Selenium》第一章 自动化测试基础

    第一篇 Selenium 和WebDriver工具篇 第一章 自动化测试基础 1.1    初识自动化测试 自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...

  5. 【windows核心编程】 第六章 线程基础

    Windows核心编程 第六章 线程基础 欢迎转载 转载请注明出处:http://www.cnblogs.com/cuish/p/3145214.html 1. 线程的组成 ①    一个是线程的内核 ...

  6. [Python笔记][第一章Python基础]

    2016/1/27学习内容 第一章 Python基础 Python内置函数 见Python内置函数.md del命令 显式删除操作,列表中也可以使用. 基本输入输出 input() 读入进来永远是字符 ...

  7. 第一章 jQuery基础

    第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...

  8. 0003.5-20180422-自动化第四章-python基础学习笔记--脚本

    0003.5-20180422-自动化第四章-python基础学习笔记--脚本 1-shopping """ v = [ {"name": " ...

  9. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

随机推荐

  1. SQL Server阻止了对组件xp_cmdshell过程的解决方案 分类： SQL Server 2015-03-05 08:31 305人阅读 评论(0) 收藏

    SQL Server阻止了对组件xp_cmdshell过程的解决方案 错误描述:SQL Server阻止了对组件'xp_cmdshell'的过程'sys.xp_cmdshell'的访问.因为此组件已作 ...

  2. 解决apache服务器本地可以访问，同局域网内他人不能访问的问题（转）

    问题提出:发现这个问题时,我同学让我做好的网页小案例给他看看,我是用wamp搭建的本地服务器,本地访问地址例如为: http://localhost/Dedecms/index.php 对于其他人要访 ...

  3. docker 实战---部署tomcat\weblogic集群 （二）

    安装tomcat镜像 准备好须要的jdk tomcat等软件放到home文件夹以下 启动一个虚拟机 docker run -t -i -v /home:/opt/data  --name mk_tom ...

  4. UVA 10465 Homer Simpson(dp + 完全背包)

    Problem C: Homer Simpson Time Limit: 3 seconds Memory Limit: 32 MB Homer Simpson, a very smart guy, ...

  5. 将html中的br换行符转换为文本输入中的换行符(转)

    PHP中的有个非常好的函数:nl2br(),将文本框中的换行转换为HTML页面的<br />,但是如何实现将html中的<br />换行符转换为文本框中的换行符呢?下面这几个方 ...

  6. Qt 学习之路 ：使用 QJson 处理 JSON

    XML 曾经是各种应用的配置和传输的首选方式.但是现在 XML 遇到了一个强劲的对手:JSON.我们可以在 这里 看到有关 JSON 的语法.总体来说,JSON 的数据比 XML 更紧凑,在传输效率上 ...

  7. myEclipse新建jsp，默认编码

    修改地方在: myeclipse →fiter and editor →jsp

  8. java输入输出

    1. import java.io.*;//写进文档,然后又在显示器显示出来.public class fileinputstream{public static void main(String[] ...

  9. Android（java）学习笔记213：开源框架post和get方式提交数据（qq登录案例）

    1.前面提到Http的get/post方式  . HttpClient方式,实际工作的时候不常用到,因为这些方式编写代码是很麻烦的 2.Android应用会经常使用http协议进行传输,网上会有很完善 ...

  10. sqlite使用blob类型存储/访问 结构体

    /* open fire host and slora report data database */ int open_report_db(void) { ; char sql[SQL_COMMAN ...