Canvas应用绚烂效果-creatjs实现

js文件
var content;//画布
var stage;//舞台
var spriteSheet;//精灵列表类
var sprite;//精灵
window.οnlοad=function(){
    //获取画布
    content=document.getElementById_x_x_x_x_x_x("canvas");
    //画布上创建舞台
    stage=new createjs.Stage(content);
    //舞台增加时间监听
    //点击鼠标事件监听
    stage.addEventListener("stagemousedown",clickStage);
    //滑动鼠标事件监听
    stage.addEventListener("stagemousemove",moveOnStage);
    //创建SpriteSheet数据
    var data={
        images:["1.png"],
        frames:{width:24,height:24,regX:10,regY:10}
    }

    //创建SpriteSheet类
    spriteSheet=new createjs.SpriteSheet(data);
    //创建Sprite类
    sprite=new createjs.Sprite(spriteSheet);
    //设置帧频率
    createjs.Ticker.setFPS(20);
    //设置帧监听(类似于定时器,进行定时更新舞台)
    createjs.Ticker.addEventListener("tick",tick);
}

//帧监听
function tick(e){
    var t=stage.getNumChildren();//获得舞台上精灵的数量
    for(var i=t-1;i>=0;i--){
        var snow=stage.getChildAt(i);
        //计算XY的偏移位置
        snow.vY+=2;
        snow.vX+=1;
        //重定位x,y的位置
        snow.x+=snow.vX;
        snow.y+=snow.vY;
        //重定义缩放
        snow.scaleX=snow.scaleY=snow.vS+snow.scaleX;
        //重定义透明度
        snow.alpha+=snow.vA;
        //判断是否消除
       if(snow.alpha<=0||snow.y>=content.height||snow.x>=content.width){
            //由舞台删除
            stage.removeChildAt(i);
        }
    }
    //更新舞台
    stage.update(e);
}

//点击舞台事件监听
function clickStage(e){
    //增加雪花
    addSnow(Math.random()*20+100, stage.mouseX,stage.mouseY,2);
}

//在舞台上上移动鼠标事件监听
function moveOnStage(e){
    //增加雪花
    addSnow(Math.random()*2+1, stage.mouseX,stage.mouseY,1);
}

//count:数量;x:鼠标x位置;y:鼠标y位置;speed:速度;
function addSnow(count,x,y,speed){
    for(var i=0;i
        var snow=sprite.clone();
        snow.alpha=Math.random()*0.5+0.5;//透明度
        snow.x=x;//鼠标x位置
        snow.y=y;//鼠标y位置

        snow.scaleX=snow.scaleY=Math.random()+0.3;//缩放尺寸

        var a=Math.PI*2*Math.random();//随机弧度
        var r=(Math.random()-0.5)*speed*30;//随机半径

        snow.vX=Math.sin(a)*r;//偏离x位置的水平距离,此处自己定义,用于显示此雪花偏离鼠标处x位置
        snow.vY=Math.cos(a)*r;//偏离Y位置的垂直距离,此处自己定义,用于显示此雪花偏离鼠标处y位置

        snow.vS=(Math.random()-0.5)*0.2;//精灵缩放因子的改变因子,此处自己定义
        snow.vA=-Math.random()*0.05-0.01;//透明度变化率,此处自己定义
        //增加进舞台
        stage.addChild(snow);
    }
}      

转载于:https://www.cnblogs.com/Eudora/p/4103261.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/432155.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

世界地图并不是世界的真实样貌!甚至误差非常大

现在所用的世界地图并不是世界的真实样貌&#xff0c;甚至误差大的离谱。 地球属于三维球体&#xff0c;想完整地表现到二维平面上是不可能的&#xff0c;必须牺牲一些真实属性。因为三维降到二维肯定存在扭曲失真&#xff0c;这是维度差异所决定的&#xff0c;不可避免。 我们…

error MSB6006: cmd.exe exited with code 3

利用vs2012和qt5.5.1&#xff0c;在编译例子时发生如下错误&#xff1a; C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V110\Microsoft.CppCommon.targets(172,5): error MSB6006: “cmd.exe”已退出&#xff0c;代码为 3。 图片如下&#xff1a; 解决办法如下&#x…

OSGI(面向Java的动态模型系统)

http://baike.baidu.com/subview/362847/6280632.htm?fraladdin 转载于:https://www.cnblogs.com/suifengbingzhu/p/4104109.html

JQuery方法

1、replace var str "I am a man"; str.replace(a,b); 说明&#xff1a;jquery的replace()函数默认替换第一项&#xff1b; var re new RegExp(a,g); str.replace(re,b); 说明&#xff1a;RegExp是正则表达式对象&#xff0c; g表示替换全部 2、json与对象的转换 v…

数学天才用5万字让你读懂:微积分!

前面接连发了三篇麦克斯韦方程组的文章&#xff08;积分篇、微分篇和电磁波篇&#xff09;&#xff0c;从理论上来说&#xff0c;讲麦克斯韦方程组不讲微积分是不行的&#xff0c;因为人家本来就是一组积分方程和一组微分方程。 但是&#xff0c;为了让更多人&#xff0c;尤其是…

指定一个actor对pawn不可见

1. 把一个staticmesh作成一个actor 2. 给actor添加一个tag 3. 在pawn的beginPlay里面查找这个actor&#xff0c;并设置actor的owner为pawn&#xff0c;然后调用set owner no see

oracle中DECODE与CASE的用法区别

对于CASE与DECODE其实并没有太多的区别&#xff0c;他们都是用来实现逻辑判断。Oracle的DECODE函数功能很强&#xff0c;灵活运用的话可以避免多次扫描&#xff0c;从而提高查询的性能。而CASE是9i以后提供的语法&#xff0c;这个语法更加的灵活&#xff0c;提供了IF THEN ELSE…

error C4668: 没有将“_WIN32_WINNT_WIN10_TH2”定义为预处理器宏,用“0”替换“#if/#elif”

一般为Windows中的宏和UE4冲突所致&#xff0c;需要用如下头文件包裹冲突的头文件&#xff1a; #include "Windows/AllowWindowsPlatformTypes.h" #include "Windows/PreWindowsApi.h" #include "冲突的头文件" #include "Windows/PostWi…

Delphi XE7实现的任意位置弹出菜单

Delphi XE7中目前还没有弹出菜单组件&#xff0c;这个弹出菜单应用很普遍&#xff0c;在JAVA开发的安卓程序中很简单就可以用上了&#xff0c;应该说是一个标准控件。看了一些例子&#xff0c;但是都不能满足我想在任意位置弹出菜单需求&#xff0c;于是自己在网上找了一个例子…

计算曲线的长度

若一条平面曲线可表达成标准方程 那么它的长度就是&#xff1a; 其中a、b为x的上下限。 若平面曲线可表达成参数方程 那么它的长度就是&#xff1a;

MATLAB 求曲线长度

1. 求曲线长度积分公式 2. 已知曲线方程 3. 已知系数&#xff0c;曲线方程为 y 0.0001 * x 0.0005 * x 20 4. 已知曲线的x的起点和终点 -90.78 &#xff0c;90.78 5. matlab中定义曲线方程 >> syms x; >> y 20 0.0005 * x ^ 2 0.0001 * x ^ 3; 6. matlab中…

C++调用matlab dll

1. 编写matlab函数 2. 命令行输入 mex -setup 选择 mex -setup C 3. 命令行输入 mbuild -setup 选择 mex -setup C -client MBUILD 4. 命令行输入 mcc -W cpplib:add -T link:lib add.m -C 第一个add为生成的dll名称&#xff0c;第二个add为m文件名称&#xff0c;m文…

java方法使用

1 在方法中可以调用同一个类中的方法和属性&#xff0c;但是不能定义方法。system.out语句只能在方法中 2 方法重载&#xff1a;&#xff08;1&#xff09;同一个类中 &#xff08;2&#xff09;方法名相同 &#xff08;3&#xff09;参数列表的类型不同或者个数不同 代码&am…

rapidxml在qt linux(gcc)下写xml文件出错

在linux&#xff08;gcc&#xff09;下使用qt写入xml出错&#xff0c;代码如下&#xff1a; 错误如图&#xff1a;这里写图片描述 在网上找了好久没有找到答案&#xff0c;最后在http://stackoverflow.com/questions/14113923/rapidxml-print-header-has-undefined-methods找到…

UE4 插件大坑

正常如果在工程中创建C类&#xff0c;UE4都会自动给类前面添加一个“工程名_API”的宏&#xff0c;但是插件中的C类不会添加。 这样如果在主工程C中调用插件中的C类就会报链接错误&#xff0c;因此需要自己手动添加“插件名_API”这个宏。

MFC工具栏增加EditBox和Button

1. 在资源视图中增加EditBox, Button控件&#xff0c;ID分别为ID_EDIT_SEED&#xff0c; ID_BTN_SEED 2. 在CMainFrame中增加成员变量 CMFCToolBarEditBoxButton *m_editSeed; CMFCToolBarButton *m_btnSeed; 3. 在CMainFrame::OnCreate中创建控件 m_editSeed new CMFCTo…

Windows 2003 服务器安全设置-批处理 (附参考链接)

长期维护windows服务器终结出来的安全设置批处理与大家分享&#xff0c;复制以下全部内容用记事本另存为bat或者cmd执行分隔符号echo. echo ------------------------------------------------------ echo. echo ........... echo. net share c$ /delete net share d$ /delete …

利用curl验证ssl网站(webservice)

curl的用法&#xff1a; http://linux.about.com/od/commands/l/blcmdl1_curl.htm DER格式的cert转换为PEM格式&#xff08;curl只接受PEM格式&#xff09;&#xff1a; openssl x509 -inform der -in cert.cer -out cert.pem curl命令示意&#xff1a; curl --cacert rootca.p…