CreateJSのeasel.js（一）

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>

CreateJSのeasel.js（一）的更多相关文章

createjs easal.js制作了一个很简单的链路图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
HTML5之2D物理引擎 Box2D for javascript Games 系列翻外篇--如何结合createJS应用box2d.js
太久没有更新了,新年回来工作,突然有收到网友的邮件提问,居然还有人在关注,惭愧,找了下电脑上还有一点儿存着,顺便先发这一个番外篇吧,好歹可以看到真实的效果,等我考完英语,一定会更新下一章," ...
【一统江湖的大前端（8）】matter.js 经典物理
目录 [一统江湖的大前端(8)]matter.js 经典物理一.经典力学回顾二. 仿真的实现原理 2.1 基本动力学模拟 2.2 碰撞模拟三. 物理引擎matter.js 3.1 <愤怒的 ...
前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
JS中跨域问题
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
CreateJS入门 -- 注释详细到爆炸（My Style）
写在前面首先,还是谢谢大家的支持,谢谢!记得在之前的文章中我说过自己算是一个半文艺程序员,也一直想着写一写技术性和其他偏文学性的文章.虽然自己的底子没有多么优秀,但总是觉得这个过程中可以督促自己去思 ...
JS动画之缓动函数分析及动画库
上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...
基于python编写的天气抓取程序
以前一直使用中国天气网的天气预报组件都挺好,可是自从他们升级组件后数据加载变得非常不稳定,因为JS的阻塞常常导致网站打开速度很慢.为了解决这个问题决定现学现用python编写一个抓取程序,每天定时抓取 ...
[算法][包围盒]球，AABB，OBB
参考地址请看图片水印:http://www.cnblogs.com/iamzhanglei/archive/2012/06/07/2539751.html http://blog.sina.com.c ...

随机推荐

管道导致的while循环体变量失效
#!/bin/sh num= cat /etc/passwd | while read line do num=$(($num+)) done echo $num linux:~ # sh a.sh ...
linux上配置网络/安装vsftp服务器
1 准备用yum方式安装,小红帽linux原版不注册无法适用,只好安装centos系统 2 安装好centos系统注意事项: 硬盘得是IDE 配置好网络必须通,eth0的配置文件设置一下,联网启用 c ...
c#开发Mongo笔记第九篇
用skip略过少量的文档还是不错的.但是要是数量非常多的话,skip就会变得很慢,因为要先找到需要被略过的数据,然后再抛弃这些数据.大多数数据库都会在索引中保存更多的元数据,用于处理skip, 但是m ...
远程桌面Default.rdp 中各个参数的含义（转）
存储在 Default.rdp 文件中的设置默认情况下,将在“我的文档”文件夹中创建 Default.rdp 文件.以下 RDP 设置存储在 Desktop.rdp 文件中: desktopwidt ...
php实现验证码
验证码在表单实现越来越多了,但是用js的写的验证码,总觉得不方便,所以学习了下php实现的验证码.好吧,其实是没有事情干,但是又不想浪费时间,所以学习了下php实现验证码.正所谓,技多不压身.而且 ...
老调重弹：JDBC系列之<驱动加载原理全面解析) ----转
最近在研究Mybatis框架,由于该框架基于JDBC,想要很好地理解和学习Mybatis,必须要对JDBC有较深入的了解.所以便把JDBC 这个东东翻出来,好好总结一番,作为自己的笔记,也是给读者 ...
delphi平方开方
用delphi自带的sqr和sqrt函数 procedure TForm2.SpeedButton3Click(Sender: TObject); begin ShowMessage(Sqr(6).T ...
从SQLSERVER/MYSQL数据库中随机取一条或者N条记录
从SQLSERVER/MYSQL数据库中随机取一条或者N条记录很多人都知道使用rand()函数但是怎麽使用可能不是每个人都知道建立测试表 USE [sss] GO ,NAME ) DEFAULT ...
golang 值得注意的地方（2则）
golang 的语法和使用方式都非常简单明了,没有花哨的语法糖,也没有多余的关键字. 但是即使是这么简洁的语言,仍然有一些不那么直白,需要注意的地方,比如下面2点. interface 赋值 nil ...
个性二维码开源专题<替换定位点>
基础方法: ChangeFillShape //修改填充形状 ChangeFillShape(...) // 摘要: // 修改填充形状 // // 参数: // g: // 图形画板 // // F ...

CreateJSのeasel.js（一）

CreateJSのeasel.js（一）的更多相关文章

随机推荐

热门专题