这章学学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. Matlab编程-矩阵函数

    (1) are函数 功能:求解Riccati方程的解 Riccati方程的一般形式:A^TX+XA-XBX+C=0 (2)blkdiag函数 函数功能:a=blkdiag(a1,a2,a3,…)表示生 ...

  2. jquery 使用方式记录

    1.监听键盘事件 $("#id").keyup(function(event){ if(event.keyCode == 13){ $("#btn_addgoods_su ...

  3. 【Lucene3.6.2入门系列】第14节_SolrJ操作索引和搜索文档以及整合中文分词

    package com.jadyer.solrj; import java.util.ArrayList; import java.util.List; import org.apache.solr. ...

  4. SpringMVC存取Session的两种方法 转

    方法一:使用servlet-api @Controller public class ManagerController { @Resource private ManagerService mana ...

  5. 小试牛刀——python接口测试小框架

    用例设计: 执行用例代码: # -*- coding: UTF-8 -*-import xlrd,logging,urllib,urllib2,json,sysfrom pylsy import py ...

  6. C# 模拟用户登录

    , data.Length);            newStream.Close();                               request.CookieContainer  ...

  7. ubuntu下管理android手机

    1.安装adb apt-get install android-tools-adb 2.配置 1)运行lsusb Bus 001 Device 002: ID 8087:0024 Intel Corp ...

  8. C# 数组排序 基本算法 分类： C# 2014-09-25 15:43 129人阅读 评论(0) 收藏

    说明:冒泡.直接插入.选择.自带方法四中基本排序算法. using System; using System.Collections.Generic; using System.ComponentMo ...

  9. Android color(颜色) 在XML文件和java代码中

    Android color(颜色) 在XML文件和java代码中,有需要的朋友可以参考下. 1.使用Color类的常量,如: int color = Color.BLUE;//创建一个蓝色 是使用An ...

  10. 手把手教你在ubuntu下创建桌面快捷方式

    习惯使用windows的朋友来说创建桌面快捷方式简直就是so easy, 鼠标右键点击文件-->选择发送桌面快捷方式.就OK了.对于ubuntu下该如何创建桌面快捷方式呢?以下以创建eclips ...