Createjs学习笔记1-简介与简单使用
一.使用EaselJS
先到官网下载easeljs,也可以点这里
1.得到easeljs-0.8.1.min.js后，新建一个HTML5文件并导入：
<script src="easeljs-0.8.1.min.js"></script>
2.入口函数和创建canvas标签:
<body onload="init();">
<canvas id="game" width="1000" height="700" style="background-color: white"></canvas>
</body>
3.创建舞台：
<script>
function init(){
var stage = new createjs.Stage("game");
//.......
stage.update();
}
</script>
二.使用EaselJS创建图形和文字
1.添加文字
var txt = new createjs.Text("HELLO","20px Times","#000");
txt.x = 100;
txt.y = 100;
txt.text = "hello, world!" ;
这里先创建了文字，然后又在创建后修改了文字位置，以及内容。
最后一定要把新创建的文字加入到舞台中，不然无法显示：
stage.addChild(txt);
2.添加图形
图形包括代码绘制的适量图（如一个圆，一个矩形）和png、jpg等格式的图片
这里先说代码绘制的适量图，图片后面再学习：
var shape = new createjs.Shape();
shape.graphics.beginStroke("#000").beginFill("#ff0000").drawRect(0, 0, 100, 100);
可以查看API修改shape的位置、大小、透明度、旋转、锚点等属性。
三.容器Container
Container是一个容器，可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素，包含在一个Container中方便统一管理，比如你要做一个按钮，按钮图形和上面的提示文字包含在一个Container中，可以统一移动或者显示隐藏，比如：
var button = new createjs.Container();
//创建一个文本
var label = new createjs.Text("OK","20px Times","#000");
label.textAlign = 'center';
label.textBaseline = 'middle';
//创建一个适量圆
var shape = new createjs.Shape(); shape.graphics.beginFill("#ff0000").drawCircle(0, 0, 50);
shape.shadow = new createjs.Shadow("#000",5,5,8);
//将圆和文本添加到button容器。这里一定要先添加shape，画布渲染顺序原因，先文本的话，圆在上层，文本就会被遮住
button.addChild(shape,label);
button.x = 100;
stage.addChild(button);
按照上面的代码可以创建了一个按钮，我们设置了button.x = 100，发现圆和文字同时向右移动了100，这就是Container的好处。
下面我们添加一些简单功能：
如果想让鼠标经过时显示一个小手的形状我们可以这样：
button.cursor = "pointer";
//这句代码不添加的话，上面的事件是不会生效的
stage.enableMouseOver();
四.添加事件监听和Ticker
想要与stage中的元素交互只需要给他们添加addEventListener，例如点击，鼠标划过等等，而对于stage本身，有个特别的事件"tick"，给stage设置tick相当于javascript中的SetInterval，定时的运行一个函数，可以用来定时的刷新stage,即运行stage.update()。一个比较常用的方法也是一个最简单的游戏框架一般都是这样：
<script>
var stage;
function init(){
stage = new createjs.Stage('game');
stage.enableMouseOver();
//setFPS方法已过时
//createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
}
function update(event){
stage.update();
}
</script>
假如我们要监听前面创建button的点击事件，这样做就可以了：
button.addEventListener("click",function(e){
alert("ok");
});
还可以添加鼠标滑过等事件监听，（这里使用on方法添加，on方法是addEventListener的一个简单的形式）：
button.on("mouseover",function(e){
button.alpha = 0.5;
});
button.on("mouseout",function(e){
button.alpha = 1;
});
五.应用：做一个简单的画板工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/easeljs.js"></script>
<style>
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;}
#myCanvas{background: #1d292c;}
</style>
</head>
<body onload="init()">
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var stage = new createjs.Stage(canvas);
var drawingCanvas,oldPt,oldMidPt,title,color,stroke,colors,index;
var vw,vh;
function init() {
canvasChange();
index = 0;
colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];
stage.autoClear = false;
stage.enableDOMEvents(true);
createjs.Touch.enable(stage); //允许触控
drawingCanvas = new createjs.Shape();
stage.addEventListener("stagemousedown", handleMouseDown);
stage.addEventListener("stagemouseup", handleMouseUp);
title = new createjs.Text("Click and Drag to draw", "36px Arial", "#777777");
title.x = 300;
title.y = 200;
stage.addChild(title);
stage.addChild(drawingCanvas);
stage.update();
}
function update(e) {
stage.update();
}
function canvasChange() {
vw = document.body.clientWidth;
vh = document.body.clientHeight;
canvas.width = vw;
canvas.height = vh;
stage.update();
}
function handleMouseDown(event) {
if (!event.primary) { return; }
if (stage.contains(title)) {
stage.clear();
stage.removeChild(title);
}
color = colors[(index++) % colors.length];
stroke = Math.random() * 30 + 10 | 0;
oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
oldMidPt = oldPt.clone();
stage.addEventListener("stagemousemove", handleMouseMove);
}
function handleMouseMove(event) {
if (!event.primary) { return; }
var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);
drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;
oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;
stage.update();
}
function handleMouseUp(event) {
if (!event.primary) { return; }
stage.removeEventListener("stagemousemove", handleMouseMove);
}
</script>
</body>
</html>
评论已关闭