easelJS 初始入门
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript" src="js/Button5.js"></script>
<script type="text/javascript" src="js/index023.js"></script>
</head>
<body>
<div id="container1">
<canvas id="demoCanvas" width="500" height="300"></canvas>
</div>
<div>
<canvas id="demo2" width='300' height='300'></canvas>
</div>
<div>
<canvas id="demo3" width='300' height='300'></canvas>
</div>
<div>
<canvas id="demo4" width='300' height='300'></canvas>
</div>
<div>
<canvas id="demo5" width='500' height='100'></canvas>
</div>
<div>
<canvas id="demo6" width='300' height="200"></canvas>
</div>
<div>
<canvas id="demo7" width="300" height="200"></canvas>
</div>
<div>
<canvas id="demo8" width="500" height="200"></canvas>
</div>
<div>
<canvas id="demo9" width="500" height="100"></canvas>
</div>
<div>
<canvas id="demo10" width="500" height="200"></canvas>
</div>
<div>
<canvas id="demo11" width="500" height="200"></canvas>
</div>
<div>
<canvas id="demo12" width="500" height="200"></canvas>
</div>
<div>
<canvas id="demo13" width="500" height="100"></canvas>
</div>
<div>
<select onchange="createjs.Ticker.setFPS(Number(this.value));">
<option value="10">10 fps</option>
<option value="20" selected>20 fps</option>
<option value="30">30 fps</option>
<option value="40">40 fps</option>
<option value="50">50 fps</option>
<option value="60">60 fps</option>
</select><br>
<canvas id="demo14" width="500" height="200"></canvas>
</div>
<div>
<input type="button" value="pause" id="btn15" onclick="btn15Click()" ><br>
<canvas id="demo15" width="500" height="200"></canvas>
</div>
</body>
</html>
$(function() {
initCanvas();
// 一个可以感应的圆
init2();
// N个旋转的可以感应的圆
init3();
// 一个转臂和3个圆的故事
init4();
// 文字
init5();
// 继承
init6();
// 鼠标点击事件基础
init7();
// 鼠标事件处理
init8();
// 事件冒泡
init9();
// 点击区域
init10();
// stage的鼠标事件
init11();
// 鼠标拖动
init12();
// 动画，初级
init13();
// 动画，设置不同频率
init14();
// 动画，带暂停
init15();
});
function initCanvas(e) {
// 创建stage；
var stage = new createjs.Stage('demoCanvas');
// 创建circle；
var circle = new createjs.Shape();
circle.graphics.beginFill('red').drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
// 必须update一下才可以进行绘制；
stage.update();
}
var stage2,circle2;
function init2(e) {
stage2 = new createjs.Stage('demo2');
// 估计是连缀方式的，所以可以这样写；也可以circle = new createjs.Shape();stage.addChild(circle);
circle2 = stage2.addChild(new createjs.Shape());
circle2.graphics.beginFill('red').drawCircle(50,50,50);
circle2.x = 0;
circle2.y = 0;
// 这个事件会不停的执行
createjs.Ticker.on('tick',tick2);
}
function tick2(event) {
circle2.alpha = 0.2;
// 碰撞判断hitTest
if(circle2.hitTest(stage2.mouseX,stage2.mouseY)){
circle2.alpha = 1;
}
stage2.update(event);
//console.log(stage2);
}
var stage3,holder3;
function init3(e) {
stage3 = new createjs.Stage('demo3');
// container也是一种容器；
holder3 = stage3.addChild(new createjs.Container());
holder3.x = holder3.y = 150;
for(var i=0;i<25;i++){
var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getHSL(Math.random()*360,100,50)).drawCircle(0,0,30);
shape.x = Math.random()*300 - 150;
shape.y = Math.random()*300 - 150;
holder3.addChild(shape);
}
createjs.Ticker.on('tick',tick3);
}
function tick3(event) {
// 进行旋转
holder3.rotation += 3;
var l = holder3.getNumChildren();
for(var i=0;i<l;i++){
var child = holder3.getChildAt(i);
child.alpha = 0.1;
// globalToLocal ??
var pt = child.globalToLocal(stage3.mouseX, stage3.mouseY);
// stage3.mouseInBounds ??
if(stage3.mouseInBounds && child.hitTest(pt.x,pt.y)){
child.alpha = 1;
}
}
stage3.update(event);
}
var stage4, target4, arm4;
function init4(e) {
stage4 = new createjs.Stage('demo4');
target4 = stage4.addChild(new createjs.Shape());
target4.graphics.beginFill('red').drawCircle(0,0,45)
.beginFill('white').drawCircle(0,0,30)
.beginFill('red').drawCircle(0,0,15);
target4.x = 100;
target4.y = 180;
arm4 = stage4.addChild(new createjs.Shape());
arm4.graphics.beginFill('black').drawRect(-2,-2,100,4)
.beginFill('blue').drawCircle(100,0,8);
arm4.x = 180;
arm4.y = 100;
createjs.Ticker.on('tick',tick4);
}
function tick4(event) {
arm4.rotation += 5;
target4.alpha = 0.2;
// localToLocal ??
var pt = arm4.localToLocal(100,0,target4);
if(target4.hitTest(pt.x,pt.y)){
target4.alpha = 1;
}
// stage4.update( );// 不输入参数也是可以的；
stage4.update(event);
}
function init5(e) {
var stage5 = new createjs.Stage('demo5');
var text = new createjs.Text('Hello World','bold 86px Arial','#ff7700');
stage5.addChild(text);
stage5.update();
// 目前还没有进行定位；
var text2 = new createjs.Text('Google Web Fonts is unavailable.');
stage5.addChild(text2);
stage5.update();
}
function init6(e) {
var stage6, holder6;
stage6 = new createjs.Stage('demo6');
var btn1 = stage6.addChild(new Button('Hello!','#f00'));
btn1.x = 20;
btn1.y = 20;
var btn2 = stage6.addChild(new Button('GoodBye.','#0f0'));
btn2.x = 20 ;
btn2.y = btn1.y + 50;
var btn3 = stage6.addChild(new Button('Hello again!','#0ff'));
btn3.x = 20;
btn3.y = btn2.y + 50;
// tick还可以传入stage对象？？
createjs.Ticker.on('tick', stage6);
}
// 鼠标点击事件，基础；
function init7(e) {
var stage = new createjs.Stage('demo7');
var circle = new createjs.Shape();
circle.graphics.beginFill('red').drawCircle(0,0,50);
circle.x = 100;
circle.y = 100;
circle.on('click',function(){
alert('click');
});
// 可以写的事件有： click, mousedown, mouseup, dblclick, pressmove, pressup,
// mouseover / mouseout, and rollover / rollout.
// 后四个事件需要stage.enableMouseOver(frequency). 处理一下；
// on函数的全部功能：circle.on(type, listener, scope, once, data, useCapture);
circle.on('mousedown',function(){
console.log('mousedown');
});
stage.addChild(circle);
stage.update();
}
var stage8,output8;
// 鼠标事件处理
function init8(e) {
stage8 = new createjs.Stage('demo8');
// 在stage上面enableMouseOver一下；
stage8.enableMouseOver();
output8 = new createjs.Text('Test press, click, doubleclick, mouseover, and mouseout', '14px Arial');
output8.x = output8.y = 10;
stage8.addChild(output8);
var circle = new createjs.Shape();
circle.graphics.beginFill('red').drawCircle(0,0,50);
circle.x = circle.y = 100;
circle.name = 'circleName';
stage8.addChild(circle);
var square = new createjs.Shape();
square.graphics.beginFill('green').drawRect(-50,-50,100,100);
square.x = 250;
square.y = 100;
square.name = 'squareName';
stage8.addChild(square);
circle.on('click',handleMouseEvent8);
circle.on('dblclick',handleMouseEvent8);
circle.on('mouseover',handleMouseEvent8);
circle.on('mouseout',handleMouseEvent8);
square.on('click',handleMouseEvent8);
square.on('dblclick',handleMouseEvent8);
square.on('mouseover',handleMouseEvent8);
square.on('mouseout',handleMouseEvent8);
stage8.update();
}
function handleMouseEvent8(evt) {
output8.text = 'evt.target:'+evt.target+', evt.type:'+evt.type;
// 需要更新的时候再进行更新，节省cpu资源，不使用 tick:1
stage8.update();
}
var stage9,output9,lastPhase9;
// 事件冒泡
function init9(e) {
stage9 = new createjs.Stage('demo9');
stage9.name = 'stage9';
output9 = new createjs.Text('try clicking on the background vs the label text\n\nthe background & label are both inside of a Container named button','13px courier');
output9.lineWidth = 280;
output9.lineHeight = 13;
output9.x = 190;
output9.y = 10;
var background = new createjs.Shape();
background.name = 'background';
background.graphics.beginFill('red').drawRoundRect(0,0,150,60,10);
var label = new createjs.Text('click me!','bold 24px Arial','#ffffff');
label.name = 'label';
label.textAlign = 'center';
label.textBaseline = 'middle';
label.x = 150/2;
label.y = 60/2;
var button = new createjs.Container();
button.name = 'button';
button.x = 20;
button.y = 20;
button.addChild(background,label);
// 如果设置了mouseChildren = false，只能从button触发鼠标事件了，button的孩子就不能触发鼠标事件了；
// button.mouseChildren = false;
stage9.addChild(button, output9);
var targets = [stage9,button,label,background];
for(var i=0;i<targets.length;i++){
var target = targets[i];
target.on('click',handleClick9,false);
target.on('click',handleClick9,true);
}
stage9.update();
}
function handleClick9(evt) {
if(evt.currentTarget == stage9 && evt.eventPhase == 1){
output9.text = 'target: eventPhase: currentTarget:\n';
}
output9.text += evt.target.name+':'+evt.eventPhase+':'+evt.currentTarget.name+'\n';
// 会输出好多的内容呢；
console.log(output9.text);
if(evt.currentTarget == stage9 && evt.eventPhase == 3){
stage9.update();
}
}
// 点击区域
function init10(e) {
var stage = new createjs.Stage('demo10');
stage.enableMouseOver(10);
var label1 = new createjs.Text('text without hitArea','48px Arial','#f00');
label1.x = label1.y = 10;
label1.alpha = 0.5;
var label2 = new createjs.Text('text with hitArea','48px Arial','#00f');
label2.x = 10;
label2.y = 80;
label2.alpha = 0.5;
// 创建一个点击区域，没有把这个点击区域添加到显示列表中
var hit = new createjs.Shape();
hit.graphics.beginFill('#000').drawRect(0,0,label2.getMeasuredWidth(),label2.getMeasuredHeight());
label2.hitArea = hit;
label1.on('mouseover',handleInteraction10);
label2.on('mouseover',handleInteraction10);
label1.on('mouseout',handleInteraction10);
label2.on('mouseout',handleInteraction10);
stage.addChild(label1,label2);
stage.update();
createjs.Ticker.addEventListener('tick',stage);
}
function handleInteraction10(event) {
event.target.alpha = (event.type == 'mouseover')?1:0.5;
}
// stage的鼠标事件
function init11(e) {
var oldX,oldY;
var stage = new createjs.Stage('demo11');
// ??
stage.enableDOMEvents(true);
var label = new createjs.Text('finger paint','24px Arial');
label.x = label.y = 10;
var shape = new createjs.Shape();
stage.addChild(shape, label);
var color = '#0ff';
var size = 2;
stage.on('stagemousedown',function(event){
size = 10;
});
stage.on('stagemouseup',function(event){
color = createjs.Graphics.getHSL(Math.random()*360, 100, 50);
size = 2;
});
// 把这个打开，才可能看到鼠标在stage外面的情况rawX/Y；
stage.mouseMoveOutside = true;
stage.on('stagemousemove',function(event){
if(oldX){
shape.graphics.beginStroke(color).setStrokeStyle(size,'round')
.moveTo(oldX,oldY).lineTo(event.stageX,event.stageY);
stage.update();
}
oldX = event.stageX;
oldY = event.stageY;
// console.log("stageX/Y:"+event.stageX+";"+event.stageY); // 总是在范围内
// console.log("rawX/Y:"+event.rawX+";"+event.rawY);// 可能<0，或者> weight/height
});
stage.update();
}
function init12(e) {
var stage = new createjs.Stage('demo12');
stage.mouseMoveOutside = true;
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
var label = new createjs.Text('drag me','bold 14px Arial','#fff');
label.textAlign = 'center';
label.y = -7;
var dragger = new createjs.Container();
dragger.x = dragger.y = 100;
dragger.addChild(circle,label);
stage.addChild(dragger);
dragger.on('pressmove',function(event){
event.currentTarget.x = event.stageX;
event.currentTarget.y = event.stageY;
stage.update();
});
stage.update();
}
// 这样会不停的运行tick001函数；
createjs.Ticker.addEventListener('tick',tick001);
function tick001(e) {
// console.log('tick001');
}
// 设置间隔时间 1000ms/40FPS = 25ms;放在前面、后面都是可以的；
//createjs.Ticker.setInterval(250);
// 后面设置setFPS(40)会覆盖前面的设置；
createjs.Ticker.setFPS(4);
var stage13, circle13;
// 动画，初级
function init13(e) {
stage13 = new createjs.Stage('demo13');
circle13 = new createjs.Shape();
circle13.graphics.beginFill('red').drawCircle(0, 0, 40);
circle13.y = 50;
stage13.addChild(circle13);
createjs.Ticker.on('tick',tick13);
createjs.Ticker.setFPS(40);
}
function tick13(e) {
circle13.x = circle13.x + 5;
if(circle13.x > stage13.canvas.width){
circle13.x = 0;
}
stage13.update(e);
}
var stage14, timeCircle14, tickCircle14;
// 动画，设置频率
function init14(e) {
stage14 = new createjs.Stage('demo14');
timeCircle14 = new createjs.Shape();
timeCircle14.graphics.beginFill('red').drawCircle(0, 0, 40);
timeCircle14.y = 50;
stage14.addChild(timeCircle14);
tickCircle14 = new createjs.Shape();
tickCircle14.graphics.beginFill('blue').drawCircle(0, 0, 40);
tickCircle14.y = 150;
stage14.addChild(tickCircle14);
createjs.Ticker.on('tick', tick14);
createjs.Ticker.setFPS(20);
}
function tick14(event) {
// event.delta - elapsedTimeInMS /1000msPerSecond * pixelsPerSecond
timeCircle14.x = timeCircle14.x + (event.delta)/1000*100;
// console.log(event.delta); // 这个delta跟setFPS(20)是有关系的；
if(timeCircle14.x > stage14.canvas.width){
timeCircle14.x = 0;
}
tickCircle14.x = tickCircle14.x + 5; // 5*20 = 100;
if(tickCircle14.x > stage14.canvas.width){
tickCircle14.x = 0;
}
stage14.update(event);
}
var stage15, pauseCircle15, goCircle15, output15;
// 动画，带暂停
function init15(e) {
stage15 = new createjs.Stage('demo15');
pauseCircle15 = new createjs.Shape();
pauseCircle15.graphics.beginFill('red').drawCircle(0, 0, 40);
pauseCircle15.y = 50;
stage15.addChild(pauseCircle15);
goCircle15 = new createjs.Shape();
goCircle15.graphics.beginFill('blue').drawCircle(0, 0, 40);
goCircle15.y = 150;
stage15.addChild(goCircle15);
createjs.Ticker.on('tick', tick15);
output15 = stage15.addChild(new createjs.Text("","14px Arial","#000"));
output15.lineHeight = 15;
output15.textBaseline = "top";
output15.x = 10;
output15.y = stage15.canvas.height - output15.lineHeight*3-10;
}
function tick15(event) {
goCircle15.x += 10;
if(goCircle15.x > stage15.canvas.width){
goCircle15.x = 0;
}
if(!createjs.Ticker.getPaused()){
pauseCircle15.x += 10;
if(pauseCircle15.x > stage15.canvas.width){
pauseCircle15.x = 0;
}
}
output15.text = "getPaused() = "+createjs.Ticker.getPaused()+"\n"+
"getTime(true) = "+createjs.Ticker.getTime(true)+"\n"+
"getTime(false) = "+createjs.Ticker.getTime(false);
stage15.update(event);
}
function btn15Click(e) {
var paused = !createjs.Ticker.getPaused();
createjs.Ticker.setPaused(paused);
document.getElementById('btn15').value = paused?"unpause":"pause";
}(function () {
var Button = function(label, color){
this.initialize(label, color);
};
var p = Button.prototype = new createjs.Container();
p.label;
p.background;
p.count = 0;
p.Container_initialize = p.initialize;
p.initialize = function(label,color){
this.Container_initialize();
this.label = label;
if(!color) {
color ='#ccc';
}
var text = new createjs.Text(label, '20px Arial','#000');
text.textBaseline = 'top';
text.textAlign = 'center';
var width = text.getMeasuredWidth() + 30;
var height = text.getMeasuredHeight() + 20;
this.background = new createjs.Shape();
this.background.graphics.beginFill(color).drawRoundRect(0,0,width,height,10);
text.x = width /2;
text.y = 10;
this.addChild(this.background, text);
this.on('click', this.handleClick);
this.on('tick', this.handleTick);
this.mouseChildren = false;
};
p.handleClick = function(event){
var target = event.target;
alert('You clicked on a button: '+ target.label);
};
p.handleTick = function (event) {
p.alpha = Math.cos(p.count++*0.1)*0.4+0.6;
};
window.Button = Button;
}());