这章学学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. 2015/11/06 社保查询系统持续 挂机ing

  2. MySQL5.5 所支持的存储引擎

    本博文的主要内容有 .存储引擎的概念 .MySQL5.5 所支持的存储引擎 .操作默认存储引擎 .选择存储引擎 与其他的数据库软件不同,MySQL数据库软件提供了一个名为存储引擎的概念,由于存储引擎是 ...

  3. 去除 Visual Studio 中臃肿的 ipch 和 sdf 文件

    使用VS2010建立C++解决方案时,会生成SolutionName.sdf和一个叫做ipch的文件夹,这两个文件再加上*.pch等文件使得工程变得非常的庞大,一个简单的程序都会占用几十M的硬盘容量, ...

  4. Little shop of flowers - SGU 104 (DP)

    题目大意:把 M 朵花插入 N 个花瓶中,每个花插入不同的花瓶都有一个价值A[Mi][Nj],要使所有的花都插入花瓶,求出来最大的总价值(花瓶为空时价值是0). 分析:dp[i][j]表示前i朵花插入 ...

  5. 又是一道水题 hdu背包

    Problem Description 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负) ...

  6. centos7 mysql 5.6.30 默认配置文件

      默认配置 vim /etc/my.cnf.rpmsave mysql  Ver 14.14 Distrib 5.6.30, for linux-glibc2.5 (x86_64) using  E ...

  7. 手把手教你mysql(十)索引

    手把手教你mysql(十)索引 一:索引的引入 索引定义:索引是由数据库表中一列或者多列组合而成,其作用是提高对表中数据的查询速度. 类似于图书的目录,方便快速定位,寻找指定的内容,如一本1000页的 ...

  8. Android Studio打包签名全过程

    Step1:Build-----Generate Step2:签名文件保存位置,习惯性的保存在项目的根目录下E:\Users\StudioProject\SmartHust\smarthust.jks ...

  9. B2B，B2C和C2C的区别

    电子商务发展至今,已经有十余年了,但是对于电子商务的概念,还没有一个统一的说法.接触电子商务的人想必脑海中肯定会产生这样的疑问:电子商务和网络购物是一码事,还是两个概念?当下盛行的淘宝,当当之类的网购 ...

  10. RPM命令用法详解

    RPM 有五种基本的操作方式(不包括创建软件包): 安装, 卸载, 升级, 查询,和验证. 下面我们就来逐一的讲解吧. 一. 安装RPM包 RPM 软件包通常具有类似foo-1.0-1.i386.rp ...