<canvas id="myCanvas"></canvas>
<script>
var stage = new createjs.Stage('myCanvas');//在canvas上创建一个显示容器,stage的含义是舞台
var circle = new createjs.Shape();//创建一个图形对象
circle.graphics.beginFill('red').drawCircle(0, 0, 40);//设置图形的颜色,形状
stage.addChild(circle);//将图形添加到容器的显示列表中
stage.update();//重新渲染。stage 不会主动渲染,所以必须在完成显示列表的更新后手动调用此方法
</script>
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
// Actions carried out each tick (aka frame)
if (!event.paused) {
// Actions carried out when the Ticker is not paused.
}
}
//传递一个 graphics 对象到 shape 构造器
var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100);
var shape = new createjs.Shape(graphics);
//先创建 shape,在初始化对应的 graphics
var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);
Createjs 是一个js图形库,提供简便的api用于创建图像。下面是学习的过程中整理下来的笔记。
[TOC]
安装
EASEL
入门
easel 的意思是黑板,画板。显而易见,它会提供绘制图像相关的功能。下面是一个简单的例子。
stage 可以理解为一个舞台,这个舞台上有很多演员(若干图形)。可以随时加入新演员,老演员也可以随时退出,不管加入还是退出,必须自己通知舞台的管理者--落幕(更新)。
从stage 的创建方式(基于一个已存在的 canvas)可以推断出,图像的展示是借用 canvas ,easel 提供了一些基本的抽象,比如 shape, graphics, drawCircle,等等。
下面是几个重要的概念,了解一下,便于理解之后的内容:
Ticker
Ticker 字面意思是时钟,它提供简单的类似setInterval,heart beat的功能。下面是简单的例子。
Stage
前面说过,stage 是 displayObject 的舞台。所以,它提供了一些方法,用于更新displayList,重新渲染,等等。 下面是一些常用方法。官网文档
Shape
Shape 是绘制图形的基础对象。它有一个重要的属性 graphics - 图形对象,提供了诸如 fill, drawCircle,drawRect 等常用的图形绘制方法。
创建 shape 有两种办法:
Bitmap
Bitmap 是一种 displayObject ,号称可以涵盖图像,视频,画布,暂时不明白视频和画布怎么搞?stage 不就是从把图像显示在画布上?
创建一个 Bitmap
展示
Filter
filter 就是常讲的滤镜。