寫在前面

首先，還是謝謝大家的支持，謝謝！記得在之前的文章中我說過自己算是一個半文藝程序員，也一直想著寫一寫技術性和其他偏文學性的文章。雖然自己的底子沒有多么優秀，但總是覺得這個過程中可以督促自己去思考，督促自己去學習和交流。畢竟每天忙忙碌碌之余，還是要活出自己不一樣的生活。

其次，我開通了個人的?GitHub主頁，里面有自己的技術文章，還會有個人的隨想、思考和日志。以后所有的文章都會第一時間更新到這里，然后同步到其他平臺。有喜歡的朋友可以沒事去逛逛，再次感謝大家的支持！

什么是CreateJS

官網介紹 （中文）：CreateJS 是一組模塊化代碼庫和工具套件，可以獨立工作也可以組合工作，用于通過HTML5技術來在網頁上開發豐富的交互式內容。

四個核心庫

CreateJS主要包含如下四個類庫：

• EaselJS – 簡化處理HTML5畫布（核心）
• TweenJS – 用來幫助設計H5動畫，調整HTML5屬性
• SoundJS – 用來簡化處理HTML5 audio 音頻
• PreloadJS – 幫助管理和協調加載中的一些資源

今天，主要來了解一下 EaselJS 庫

EaselJS

EaselJS 簡介

EaselJS 是一個JavaScript庫,用來簡單快捷的操作 HTML5 Canvas 標簽。在創建H5游戲，生成藝術作品、處理其他高級圖形化等工作中有著很友好的體驗。

EaselJS中的一些核心類

Stage Class -- 創建舞臺

Text Class -- 繪制文字

Graphics Class -- 繪制圖形

Shape Class -- 繪制圖形

Bitmap Class -- 繪制圖片

Ticker Class -- 定時廣播

......等

一些"栗子"

繪制文本(Text Class)

定義一個<canvas> </canvas> 畫布。

// HTML: <!-- Text Class 文本類--> <canvas id="demo1" width="650" height="400"></canvas>復制代碼

調用EaselJS提供的API - new createjs.Text()，繪制文字

// JS <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> <script>window.onload = () => {/*** Test Class 文本類 -- demo*/let stage1 = new createjs.Stage("demo1");let text1 = new createjs.Text("Text 1 !", "bold 26px Arial", "#ff7700");text1.regX = -50; // 沿X軸負方向的偏移量text1.regY = -50; // 沿Y軸負方向的偏移量text1.x = 100; // 繪制源點 X坐標text1.y = 50; // 繪制源點 Y坐標let text2 = new createjs.Text("旋轉+XY拉伸！", "bold 18px Arial", "#ff7700");text2.x = 50;text2.y = 50;text2.rotation = 50; // 旋轉角度 DEGtext2.scaleX = 3; // X軸放大(拉伸)text2.scaleY = 2; // X軸放大(拉伸)let text3 = new createjs.Text("XY軸傾斜", "bold 50px Arial", "#ff7700");text3.x = 300;text3.y = 200;text3.skewX = 45; // X軸傾斜角度 DEGtext3.skewY = 20; // Y周傾斜角度 DEGlet text4 = new createjs.Text("文字shadow", "bold 30px Arial", "#ff7700");text4.x = 400;text4.y = 100;text4.shadow = new createjs.Shadow("#000000", 5, 5, 10); // 創建一個shadow實例Objectstage1.addChild(text1, text2, text3, text4);stage1.update(); // 更新舞臺，每次修改操作后需要更新真個舞臺才有效果} </script>復制代碼

繪制圖形(Graphics Class)

定義一個<canvas> </canvas> 畫布。

// HTML: <!-- Graphics Class 文本類--> <canvas id="demo2" width="650" height="400"></canvas>復制代碼

調用EaselJS提供的API - new createjs.Graphics()，繪制圖形

// JS <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> <script>window.onload = () => {/*** Graphics Class 繪圖類 -- demo* 用于生成矢量繪圖指令*/let stage2 = new createjs.Stage('demo2')// 畫線let g = new createjs.Graphics();/* 同一個 Graphics 實例， 可以多次繪制，以下線段、折線都是用 g 實例繪制的*/g.setStrokeStyle(10).beginStroke("#d23c4f").moveTo(400,10).lineTo(600,100)// 簡寫形式g.ss(20).s('#fafa35').mt(400,100).lt(400,260)// 多點折線的簡寫形式g.ss(1).s('#000').mt(600,400).lt(600, 200).lt(400,300).lt(500, 550)// Graphics 實例不能直接 addChild() 到舞臺 stage 中，實例化為 Shape 實例后才可以let line = new createjs.Shape(g)// 圓let g1 = new createjs.Graphics();g1.setStrokeStyle(1); // 描邊g1.beginStroke("#000000"); // 描邊顏色g1.beginFill("red"); // 圖形填充g1.drawCircle(0,0,100); // 繪制 (X, X, R)let c1 = new createjs.Shape(g1) // 實例化Shape對象// 矩形let g2 = new createjs.Graphics().beginStroke("red").beginFill("blue").drawRect(150, 0, 200, 100); // X, Y, W, Hlet c2 = new createjs.Shape(g2)// 命令對象let g3 = new createjs.Graphics();// 每個圖形接口調用后會生成一個命令對象，可以使用.command訪問，它保存對已創建或附加的最后一個命令的引用let fillCommand = g3.beginFill("green").command;g3.drawCircle(200,200,50); // 繪制 (X, X, R)let c3 = new createjs.Shape(g3);// 一些異步操作后，更新填充樣式/顏色:setTimeout(() => {fillCommand.style = "gray";stage2.update(); // 不更新舞臺，不會重新渲染}, 2000);// 點擊事件//c3.addEventListener('click', () => {// alert(123)// fillCommand.style = "gray";// stage2.update(); // 不更新舞臺，不會重新渲染//})stage2.addChild(c1, c2, c3, line);stage2.update();} </script>復制代碼

繪制圖像imgaes(Bitmap Class)

定義一個<canvas> </canvas> 畫布。

// HTML: <!-- Bitmap Class 圖像類--> <canvas id="demo3" width="650" height="400"></canvas>復制代碼

調用EaselJS提供的API - new createjs.Bitmap()，繪制圖像

// JS <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> <script>window.onload = () => {/*** bitmap Class 圖像類* 用于在畫布顯示列表中渲染圖像*/let stage3 = new createjs.Stage('demo3')// 渲染圖片let bitmap = new createjs.Bitmap('./assets/img/hill1.png')bitmap.alpha = 0.6 // 透明度bitmap.cursor = 'help'// 創建一個shadow實例Object(color, offsetX, offsetY, blur)bitmap.shadow = new createjs.Shadow("#97c89e", 20, 10, 20);// 給圖片添加遮罩let bitmap2 = new createjs.Bitmap('./assets/img/avatar.jpg')bitmap2.x = 400; // 圖片繪制的起始點X坐標bitmap2.y = 0; // 圖片繪制的起始點Y坐標//遮罩圖形let shape = new createjs.Shape();shape.graphics.beginFill('#000').drawCircle(0, 0, 100);shape.x = 500; // 圓心X坐標shape.y = 100; // 圓心Y坐標bitmap2.mask = shape; //給圖片bg添加遮罩// 繪制一片草地let groundBg = new createjs.Bitmap("./assets/img/ground.png").image;let ground = new createjs.Shape();w = stage3.canvas.width; // 650h = stage3.canvas.height; // 400stage3.addChild(ground)stage3.addChild(bitmap, bitmap2)stage3.update() // 此處刷新無效// 監聽定時廣播createjs.Ticker.timingMode = createjs.Ticker.RAF;createjs.Ticker.addEventListener('tick',(event) => {ground.tileW = groundBg.width;ground.y = h - groundBg.height;ground.graphics.beginBitmapFill(groundBg).drawRect(0, 0, w, groundBg.height);ground.cache(0, 0, w, groundBg.height);stage3.update()});} </script>復制代碼

一個小游戲(來自官網Demo) Running man

定義一個

畫布<!-- HTML --> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>running-man game</title> </head> <body><canvas id="demoCanvas" width="960" height="400"></canvas></body> </html>復制代碼

JS代碼

這里就不寫具體思路分析了，代碼不長，注釋也很詳細，方便理解，直接上代碼。

// JS <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> <script>window.onload = () => {let stage, w, h, loader;let sky, grant, ground, hill, hill2;function init() {stage = new createjs.StageGL("demoCanvas");// 獲取畫布的寬和高，后面計算使用w = stage.canvas.width; // 960h = stage.canvas.height; // 400// 定義靜態資源let manifest = [{src: "spritesheet_grant.png", id: "grant"}, { // 人物動作雪碧圖src: "sky.png", id: "sky"}, { // 天空src: "ground.png", id: "ground"}, { // 地面src: "hill1.png", id: "hill"}, { // 遠山src: "hill2.png", id: "hill2" // 近山}]; // Array, String, Object// 創建資源加載隊列// (Boolean) 用XHR還是用HTML標簽來加載// 如果是false的時候，就用標簽來加載，如果不能用標簽的話，就用XHR來加載。默認是true，用XHR來加載。loader = new createjs.LoadQueue(false);// 添加"資源加載完成"事件loader.addEventListener("complete", handleComplete);// 加載資源loader.loadManifest(manifest, true, "./assets/img/"); // (manifest, loadNow, basePath)}/*** 靜態資源加載完成，處理函數*/function handleComplete() {// 渲染天空sky = new createjs.Shape();sky.graphics.beginBitmapFill(loader.getResult("sky")).drawRect(0, 0, w, h);// 定義緩存區域(整個天空的區域))sky.cache(0, 0, w, h);// 渲染地面let groundImg = loader.getResult("ground");ground = new createjs.Shape();// 注意：drawRect()寬度要躲繪制一個單位ground.graphics.beginBitmapFill(groundImg).drawRect(0, 0, w + groundImg.width, groundImg.height);ground.tileW = groundImg.width;ground.y = h - groundImg.height;// 緩存區域(地面的區域)ground.cache(0, 0, w + groundImg.width, groundImg.height);// 隨機渲染遠處山脈hill = new createjs.Bitmap(loader.getResult("hill"));// 設置圖像轉換// setTransform([x=0], [y=0], [scaleX=1], [scaleY=1], [rotation=0], [skewX=0], [skewY=0], [regX=0], [regY=0])hill.setTransform(Math.random() * w, h - hill.image.height * 4 - groundImg.height, 4, 4);hill.alpha = 0.5; // 設置透明度// 隨機渲染近處山脈hill2 = new createjs.Bitmap(loader.getResult("hill2"));hill2.setTransform(Math.random() * w, h - hill2.image.height * 3 - groundImg.height, 3, 3);// 創建雪碧圖動畫let spriteSheet = new createjs.SpriteSheet({framerate: 30, // 幀率 FPS"images": [loader.getResult("grant")], // 雪碧圖原圖"frames": {"width": 165, "height": 292, "count": 64, "regX": 82, "regY": 0}, // 初始化// 定義動畫"animations": {"run": [0, 25, "run"], // name: [開始索引, 結束索引, '下一個動畫名稱', 倍率]"jump": [26, 63, "run"]}});// 繪制動畫grant = new createjs.Sprite(spriteSheet, "run");// 處理雪碧圖人物下方空白grant.y = 35;// 將生成的所有內容渲染至舞臺stage.addChild(sky, ground, hill, hill2, grant);// 監聽舞臺上的鼠標點擊事件stage.addEventListener("stagemousedown", () => {// 跳轉播放 jump 動畫grant.gotoAndPlay("jump");});createjs.Ticker.timingMode = createjs.Ticker.RAF; // RAF / RAF_SYNCHED / TIMEOUTcreatejs.Ticker.addEventListener("tick", tick);}/*** 定時器-重繪舞臺*/function tick(event) {// event.delta -- 上一次tick到當前tick的mslet deltaS = event.delta / 1000;// 雪碧圖人物移動距離let position = grant.x + 150 * deltaS;// getBounds() -- 返回當前幀相對于雪碧圖原點的邊界let grantW = grant.getBounds().width * grant.scaleX;grant.x = (position >= w + grantW) ? -grantW : position;ground.x = (ground.x - deltaS * 150) % ground.tileW;// 從右至左移動山脈hill.x = (hill.x - deltaS * 30);// 如果山脈從左側離開屏幕if (hill.x + hill.image.width * hill.scaleX <= 0) {hill.x = w; // 重置回屏幕最右側}// 處理如上hill2.x = (hill2.x - deltaS * 45);if (hill2.x + hill2.image.width * hill2.scaleX <= 0) {hill2.x = w;}stage.update();}// 程序主入口-初始化init()} </script>復制代碼

完整代碼

示例demo的GitHub地址：完整代碼

總結

以上是生活随笔為你收集整理的CreateJS入门 -- 注释详细到爆炸（My Style）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。