JavaScript库EASELJS的第一眼映像(一)
本段教程来自于《LYNDA.COM.EASELJS.FIRST.LOOK》
EASELJS是一个JavaScript库，用于在HTML5提供的Canvas对象上绘制图形图像并提供了交互接口，easelJS的目标是成为Flash的替代品，由于其可绘制复杂的图形UI并提供交互接口，无需插件即可在浏览器中运行。下载地址：http://code.createjs.com/。
一个最简单的例子如下：
HTML源代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Easel JS Demo</title> <link rel="stylesheet" type="text/css" href="_css/easeljs.css"/> <script type="text/javascript" src="_js/easeljs-0.5.0.min.js"></script> <script type="text/javascript" src="_js/easeljs.js"></script> </head> <body onLoad="init()"> <canvas id="easel" width="480" height="320"> </canvas> </body> </html>
css：
/* CSS Document */
body{
background-color: #999
}
#easel{
background-color: #066;
display: block;
margin: 0 auto;
}
正常的一个JavaScript:
// JavaScript Document
function init() {
var canvas = document.getElementById("easel");
context = canvas.getContext("2d");
SIZE = 100;
centerX = canvas.width / 2;
centerY = canvas.height / 2;
rotation = 0;
setInterval(function() {
rotation += 8;
// 保存对象变形状态
context.save();
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(162, 216, 255)";
// 平移
context.translate(centerX, centerY);
// 旋转30度，方向为顺时针
// 如果没有平移，旋转顶点为0, 0
// 平移后，旋转顶点为centerX, centerY
context.rotate(rotation * Math.PI / 180);
context.fillRect(-SIZE / 2, -SIZE / 2, SIZE, SIZE);
// 恢复变形状态
context.restore();
if (rotation >= 360) rotation = 0;
}, 50);
}
使用easelJS的话代码如下：
function init(){
SIZE = 100;
var canvas = document.getElementById("easel");
centerX = canvas.width / 2;
centerY = canvas.height / 2;
// 创建作图的形状对象
var shape = new createjs.Shape();
shape.graphics.beginFill("rgb(162, 216, 255)");
shape.graphics.drawRect(0, 0, SIZE, SIZE);
// 设置起点位置，相对于父对象
shape.x = centerX;
shape.y = centerY;
// 设置注册点，用来指定变形位置
shape.regX = SIZE / 2;
shape.regY = SIZE / 2;
shape.rotation = 45;
// 设置定时器
createjs.Ticker.setFPS(30);
createjs.Ticker.addListener(function(){
// 对象旋转
shape.rotation += 8;
// 布景刷新
stage.update();
});
// 创建布景对象
var stage = new createjs.Stage(canvas);
stage.addChild(shape);
stage.update();
}
填充的例子：
function init(){
var canvas = document.getElementById("easel");
// 创建布景对象
var stage = new createjs.Stage(canvas);
// 创建图形对象
var graphics = new createjs.Graphics();
// 创建Shape对象
var shape = new createjs.Shape(graphics);
// 设置填充色
//graphics.beginFill("purple");
//graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0, .5));
// 渐变色填充
//graphics.beginLinearGradientFill(["yellow", "red"], [0, 1], 50, 50, 150, 150);
graphics.beginRadialGradientFill(["yellow", "red"], [0, 1], 100, 100, 0, 100, 100, 100);
// 开始绘图
// rect/fillRect/drawRoundRect/drawCircle/drawEllipse/drawPolyStar
graphics.rect(50, 50, 100, 100);
stage.addChild(shape);
stage.update();
}
画笔的例子：
function init(){
var canvas = document.getElementById("easel");
// 创建布景对象
var stage = new createjs.Stage(canvas);
// 创建图形对象
var graphics = new createjs.Graphics();
// 创建Shape对象
var shape = new createjs.Shape(graphics);
// 设置画笔
//graphics.beginStroke("red");
//graphics.beginLinearGradientStroke(["red", "green"], [0, 1], 50, 50, 250, 250);
graphics.beginRadialGradientStroke(["red", "green"], [0, 1], 50, 250, 100, 50, 250, 250);
// thickness, caps, joints, miter
graphics.setStrokeStyle(10, 1, "round");
// 开始画图
graphics.moveTo(50, 50);
graphics.quadraticCurveTo(50, 175, 250, 250);
graphics.lineTo(50, 250);
stage.addChild(shape);
stage.update();
}
其余的图形操作：
function init(){
var canvas = document.getElementById("easel");
// 创建布景对象
var stage = new createjs.Stage(canvas);
// 创建图形对象
var graphics = new createjs.Graphics();
// 创建Shape对象
var shape = new createjs.Shape(graphics);
// 设置画笔
graphics.beginStroke("red");
graphics.setStrokeStyle(10, 1, 1);
// 开始画图
// 矩形
//graphics.rect(50, 50, 250, 250);
//graphics.drawRoundRect(50, 50, 250, 250, 50);
//graphics.drawRoundRectComplex(50, 50, 250, 250, 50, 0, 50, 0);
// 圆
//graphics.drawCircle(250, 250, 50);
//graphics.drawEllipse(100, 100, 250, 100);
//graphics.arc(100, 100, 50, 0, 90*(Math.PI/180), 1); // 0~90°,默认顺时针,1代表逆时针
// 多边形
//graphics.drawPolyStar(250, 250, 100, 10, .5, 0);
// 链式操作
//graphics.moveTo(50, 50).lineTo(250, 250).lineTo(50, 250).closePath();
// 快捷方式
graphics.s("purple").ss(10, 1, 1).mt(50, 50).lt(250, 250).lt(50, 250).cp();
stage.addChild(shape);
stage.update();
}
至此，基本所有的图形操作全部完成，其余详细信息可以参见官方文档： http://www.createjs.com/Docs/EaselJS/
其中Graphics相关的都在这里：http://www.createjs.com/Docs/EaselJS/Graphics.html