CreateJS是基于HTML5开发的一套模块化的库和工具。
基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。
CreateJS为CreateJS库，可以说是一款为HTML5游戏开发的引擎。
EaselJS
一个JavaScript库，使HTML5 Canvas标签变得更简单。
用于创建游戏，生成艺术作品，和处理其他高级图形化等有着很友好的体验。
上下左右绘制文字
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="lib/easeljs-0.8.2.min.js"></script> <script src="lib/tweenjs-0.6.2.min.js"></script> <style> *{ padding: 0; margin: 0; } </style> </head> <body> <p>上下左右绘制文字</p> <canvas id="game"></canvas> <script> var canvas, stage, w = document.body.clientWidth, h = document.body.clientHeight; function init() { // 设置canvas属性 canvas = document.getElementById('game'); canvas.width = w; canvas.height = h; // 创建舞台 stage = new createjs.Stage(canvas); // 绘制居中文字 var text1 = new createjs.Text('Hello World', '20px Arial', '#ff4400'), bounds = text1.getBounds(); text1.x = stage.canvas.width - bounds.width >> 1; text1.y = stage.canvas.height - bounds.height >> 1; // 绘制左边的文字 var text2 = new createjs.Text('Hello World', '20px Arial', '#ff4400'); // 绘制右边的文字 var text3 = new createjs.Text('Hello World', '40px Arial', '#ff4400'), bounds = text3.getBounds(); text3.x = w - bounds.width; // 下居中文字 var text4 = new createjs.Text('Hello World', '20px Arial', '#ff7700'), bounds = text4.getBounds(); text4.x = stage.canvas.width - bounds.width >> 1; text4.y = stage.canvas.height - bounds.height; stage.addChild(text1); stage.addChild(text2); stage.addChild(text3); stage.addChild(text4); stage.update(); } init(); </script> </body> </html>
Bitmap绘制图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绘制图片</title> <script src="lib/easeljs-0.8.2.min.js"></script> <script src="lib/tweenjs-0.6.2.min.js"></script> <style> *{ padding: 0; margin: 0; } </style> </head> <body> <canvas id="game"></canvas> <script> var cjs = createjs, canvas, stage, container, w = 200, // 图片就是200*200的大小 h = 200, image; function init() { // 设置canvas属性 canvas = document.getElementById('game'); canvas.width = w; canvas.height = h; // 创建舞台 stage = new cjs.Stage(canvas); // 绘制外部容器 container = new cjs.Container(); stage.addChild(container); // 加载图片 image = new Image(); image.src = 'icon.png'; image.onload = handleImageLoad; } function handleImageLoad(event) { var bitmap = new cjs.Bitmap(event.target); bitmap.x = 0; bitmap.y = 0; bitmap.on('click', function () { alert(); }); // 加入场景 container.addChild(bitmap); stage.update(); } init(); </script> </body> </html>
绘制点击提示，使用Tween
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绘制点击提示，使用Tween</title> <script src="lib/easeljs-0.8.2.min.js"></script> <script src="lib/tweenjs-0.6.2.min.js"></script> <style> *{ padding: 0; margin: 0; } body { background: #000000; } </style> </head> <body> <canvas id="game"></canvas> <script> var cjs = createjs, canvas, stage, container, w = window.innerWidth, h = window.innerHeight, s, dt = ''; function init() { canvas = document.getElementById('game'); canvas.width = w; canvas.height = h; // 创建舞台 stage = new cjs.Stage(canvas); container = new cjs.Container(); // 绘制外部容器 stage.addChild(container); // 创建矩形 s = new DrawArc(10, '#fff'); s2 = new DrawArc(10, '#fff'); var bounds = s.getBounds(), bounds2 = s2.getBounds(); s.x = w - bounds.width >> 1; s.y = h - bounds.height >> 1; s2.x = w -bounds2.width >> 1; s2.y = h - bounds2.height >> 1; s2.alpha = 0.6; s.on('click', function () { alert('提示'); }); // 加入场景 container.addChild(s); container.addChild(s2); // Tween cjs.Tween.get(s, {loop: true}) .to({scaleX: 2.5, scaleY: 2.5, alpha: 0}, 1000, cjs.Ease.linear) // jump to the new scale properties (default duration of 0) .to({scaleX: 1, scaleY: 1, alpha: 1}, 0, cjs.Ease.linear); // 设置游戏帧率 cjs.Ticker.setFPS(60); cjs.Ticker.on('tick', stage); } // 绘制矩形 类 function DrawArc(r, c) { // 继承Shape类 cjs.Shape.call(this); this.graphics.beginFill(c).arc(0,0,r,0,2*Math.PI); // 设置矩形的边界属性，这样可以获得width和height属性 this.setBounds(0,0,r,r); } DrawArc.prototype = new cjs.Shape(); // 获得原型方法 init(); </script> </body> </html>
绘制笑脸
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绘制笑脸</title> <script src="lib/easeljs-0.8.2.min.js"></script> <script src="lib/tweenjs-0.6.2.min.js"></script> <style> *{ padding: 0; margin: 0; } </style> </head> <body> <canvas id="demoCanvas" width="1000" height="500"> alternate content </canvas> <script> var stage = new createjs.Stage('demoCanvas'); // 绘制圆形 var circle = new createjs.Shape(); circle.graphics.beginFill('orange').drawCircle(0,0,100).endFill(); circle.x = 500; circle.y = 240; stage.addChild(circle); // 绘制眼睛 var eye = new createjs.Shape(); eye.graphics.beginFill('rgba(0,0,20,.5)').drawEllipse(0,0,20,40).endFill(); eye.x = 450; eye.y = 180; stage.addChild(eye); var eye2 = new createjs.Shape(); eye2.graphics = eye.graphics.clone(); eye2.x = 530; eye2.y = 180; stage.addChild(eye2); // 绘制鼻子 var nose = new createjs.Shape(); nose.graphics.beginFill('rgba(0,0,20,.5)').drawCircle(0,0,10).endFill(); nose.x = 500; nose.y = 250; stage.addChild(nose); // 绘制嘴巴 var mouth = new createjs.Shape(); mouth.graphics.ss(4).s('rgba(0,0,0,.5)').a(0,0,100,Math.PI*60/180,Math.PI*120/180); mouth.x = 500; mouth.y = 200; stage.addChild(mouth); stage.update(); </script> </body> </html>