easelJS 初始入门

Posted 2020-06-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了easelJS 初始入门相关的知识，希望对你有一定的参考价值。

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;
}());

以上是关于easelJS 初始入门的主要内容，如果未能解决你的问题，请参考以下文章

EaselJs，“位图”在第一次浏览器加载时无法在登台上显示

如何彻底处置 EaselJS 画布？

在 EaselJS 中缓存 SpriteSheets

EaselJS spritesheet 动画在画布上不可见，但没有错误

Jekyll 偏移代码片段高亮的初始行

EaselJS StageGL：文本不起作用（但使用舞台画布）