这章学学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. MySQL表设计基础

    MySQL表设计关于blog数据库中建立所有表的sql语句<一.>sql语句中 约束概念constraint concept1.1 实体完整性entity integrity(主键--唯一 ...

  2. linux平台MongoDB数据库安装

    跟Ruiy哥一起玩转吧; <一,初始化玩转MongoDB> 1,关闭SElinux(Ruiy哥根据经验知红帽的SElinux架设就是个错误,还记得不管啥结构首先要关闭的就是它); 2,设置 ...

  3. linux下swftools 的配置

    1.安装所需的库和组件.机器之前安装过了,主要安装的是下面几个组件.如果不安装会提示machine `x86_64-unknown-linux' not recognized yum install ...

  4. Counting - SGU 117（快速幂）

    题目大意:求下面N个数里面有多少个数的M次方能整除K 代码如下: ======================================================== #include&l ...

  5. opencv学习笔记-图像叠加、混合

    在图像处理中,目标区域定义为感兴趣区域ROI(region of Interest),这是后期图像处理的基础,在获取ROI后,进行一些列的处理.ROI区域在Opencv中就是Rect,先构建Rect, ...

  6. 【Android笔记】MediaPlayer基本使用方式

    Android MediaPlayer基本使用方式 使用MediaPlayer播放音频或者视频的最简单样例: JAVA代码部分: public class MediaPlayerStudy exten ...

  7. QT GUI总结

      QT提供了设计师工具,可以很方便的使用鼠标拖拽的方式绘制界面.绘制完毕后自动生成一个界面的.h文件(如ui_mainwindow.h),其中含有一个自动生成的Ui_MainWindow类,这个类中 ...

  8. win主机用web.config和httpd.ini实现301重定向

    当你准备好好看这篇文章的时候,你应该已经知道了301重定向的作用与意义了,那么这里就不多加解释了. 那么我唯一想提的就是关于域名带与不带www的区别,并且301重定在其中的意义,详情:域名带与不带ww ...

  9. 本地如何搭建IPv6环境测试你的APP

    IPv6的简介 IPv4 和 IPv6的区别就是 IP 地址前者是 .(dot)分割,后者是以 :(冒号)分割的(更多详细信息自行搜索). PS:在使用 IPv6 的热点时候,记得手机开 飞行模式 哦 ...

  10. swift 关于delegate

    Cocoa 开发中接口-委托 (protocol-delegate) 模式是一种常用的设计模式,它贯穿于整个 Cocoa 框架中,为代码之间的关系清理和解耦合做出了不可磨灭的贡献. 在 ARC 中,对 ...