JavaScript库EASELJS的第一眼映像(一)

最新推荐文章于 2019-03-14 22:41:27 发布

Soloman

最新推荐文章于 2019-03-14 22:41:27 发布

阅读量3.9k

点赞数

分类专栏： HTML5/CSS/JavaScript

HTML5/CSS/JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本段教程来自于《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