CreateJS 学习笔记 - Githubissues

原生Canvas踩坑指南

drawImage() 在将图片绘制到canvas中时必须先预加载

var img = new Image();
img.onload = function() {
    ctx.drawImage(img);
}

save()和restore() 在绘制某些可能会影响后面画布内容的元素时，可用save()和restore()分层出来

CreateJS是一套用于简化开发HTML5应用的JavaScript类库和工具套件，有四个类库组成：

EaselJS －显示、事件机制
TweenJS －增强动画
SoundJS －处理HTML5 audio
PreloadJS －管理预加载资源
EaselJS

初始化画布

<canvas id="myCanvas" width="300" height="300"></canvas>

var canvas = document.getElementById("myCanvas");
var stage = new createjs.Stage(canvas);

绘制图形 EaselJS的Graphics类提供多种不同的图形，如：圆形、矩形、多角形

var circle = new createjs.Shape();
circle.graphics.setStrokeStyle(5).beginStroke("rgba(0, 0, 0, 0.5)").beginFill("orange").drawCircle(0, 0, 50);
circle.x = 10;
circle.y = 10;

// 将circle添加到stage中，每次添加后需要执行update更新画布才有能显示
stage.addChild(circle);
stage.update();

Ticker类 每次绘制后都需要调用update方法来更新stage，在createJS中提供了一个Ticker类解决了。

createjs.Ticker.addEventListener("tick", stage);

绘制文字

var txt = new createjs.Text("文字文字", "normal 32px Microsoft YaHei", "#222");

处理图片 Bitmap类 Bitmap类用来代表任何形式，如：Canvas、视频或图片、元素实例化、Base64

var img = new Image();
img.src = "example.jpg";
img.onload = handleImageLoad();

function  handleImageLoad() {
    var tempBitMap = new createjs.Bitmap(img);
    stage.appChild(tempBitMap);
    tempBitMap.x = 10;
    tempBitMap.y = 10;
    tempBitMap.rataion = 20; // 旋转度数
    tempBitMap.shadow = new createjs.Shadow("#222", 10, 10, 10); // 颜色、X偏移、Y偏移、阴影大小
}
stage.update();

逐帧动画 SpriteSheets

var spritesheet = new createjs.SpriteSheet({
    "images": [exampleImg],
    "frames": {"height": 100, "count": 10, "width": 100}
    "animations": {run: [0, 9]}
});

spritesheet.play(); // 播放动画
spritesheet.gotoAndStop(0); // 停止动画

TweenJS

动画

createjs.Tween.get(txt, {loop: true, ignoreGlobalPause: true})
.to({text: "the new javascript tweening engine"}, 1500)
.wait(1000)
.to({y: 50}, 500, createjs.Ease.quadInOut)
.set({visible: false}, highligt) // change text after 1.5s
.to({text: "by Grant Skinner, gskinner.com"}, 1500) // change text after 1.5s
.to({text: "TweenJS"}, 1500).set({visible: true}, highlight); // change text after 1.5s & set visible=true

SoundJS

基础用法

createjs.Sound.alternateExtensions = ["mp3"]; // 用于兼容的格式
createjs.Sound.on("fileload", loadHandler);
createjs.Sound.registerSound("song.ogg", "mySound"); // 注册 src & id & count
function loadHandler() {
    var instance = createjs.Sound.play("mySound");
    instance.on("complete", handleComplate); // 结束监听
    instance.volume = 0.5; // 音量
}
function handleComplate() {
    alert("结束");
}

音频精灵

var sounds = [{
    src:"song.ogg", data: {
        audioSprite: [
            {id:"sound1", startTime:0, duration:500},
            {id:"sound2", startTime:1000, duration:400},
            {id:"sound3", startTime:1700, duration: 1000}
        ]}
    }
];
createjs.Sound.alternateExtensions = ["mp3"];
createjs.Sound.on("fileload", loadSound);
createjs.Sound.registerSounds(sounds);
// 加载完成后
function loadSound() {
    createjs.Sound.play("sound2");
}

备用路径和扩展名

var sounds = {path:"./audioPath/",
    manifest: [
        {id: "cool", src: {mp3:"mp3/awesome.mp3", ogg:"noExtensionOggFile"}}
    ]};

    createjs.Sound.alternateExtensions = ["mp3"];
    createjs.Sound.addEventListener("fileload", handleLoad);
    createjs.Sound.registerSounds(sounds);

PreloadJS

complete: 当队列完成全部加载后触发
error: 当队列遇到错误时触发
progress: 整个队列变化时展示的进度
fileload: 一个单独文件加载完毕
fileprogress: 一个单独文件变化的进度，请注意只有文件使用XHR加载才会触发，其它只会显示0或者100%

var canvas = document.getElementById("myCanvas");
var stage = new createjs.Stage(canvas);

var manifest;
var preload;
var progressText = new createjs.Text("", "20px Arial", "#dd4814");
progressText.x = 125 - progressText.getMeasuredWidth() / 2;
progressText.y = 20;
stage.addChild(progressText);
stage.update();

// 定义相关JSON格式文件列表
function setupManifest() {
    manifest = [{
        src:  "http://cdn.gbtags.com/EaselJS/0.7.1/easeljs.min.js", 
        id: "easeljs"
    }, {
        src: "http://www.gbtags.com/gb/networks/uploadimgthumb/4d8f3f13-89c0-455c-95f3-ba5120c2f123.jpg",
        id: "logo"
    }, {
        src:  "http://www.gbtags.com/tutorials/html5-tutorial/html5-demos/assets/song.ogg",
        id: "audiofile"
    }
    ];
    for(var i=1;i<=1000;i++)
        manifest.push({src:"http://www.gbtags.com/gb/laitu/200x200"})
}

// 开始预加载
function startPreload() {
    preload = new createjs.LoadQueue(true);
    //注意加载音频文件需要调用如下代码行
    preload.installPlugin(createjs.Sound);         
    preload.on("fileload", handleFileLoad);
    preload.on("progress", handleFileProgress);
    preload.on("complete", loadComplete);
    preload.on("error", loadError);
    preload.loadManifest(manifest);
}

// 处理单个文件加载
function handleFileLoad(event) {
    console.log("文件类型: " + event.item.type);
    if(event.item.id == "logo"){
        console.log("logo图片已成功加载");
    }
}

// 处理加载错误：大家可以修改成错误的文件地址，可在控制台看到此方法调用
function loadError(evt) {
    console.log("加载出错！", evt.text);
}

// 已加载完毕进度 
function handleFileProgress(event) {
    progressText.text = "已加载 " + (preload.progress * 100 | 0) + " %";
    stage.update();
}

// 全部资源加载完毕
function loadComplete(event) {
    console.log("已加载完毕全部资源");
}

setupManifest();
startPreload();

资源加载存在一个跨域的问题，回头我再看看怎么解决。

ONE-SUNDAY / Blog

CreateJS 学习笔记 #10

原生Canvas踩坑指南

EaselJS

TweenJS

SoundJS

PreloadJS