JavaScript

语言:

JaveScriptBabelCoffeeScript

确定

var mycode = function() {

'use strict';

var testTicker = Date.now(),

testTime = testTicker,

testNow,

testMessage = document.getElementById('testmessage');

var pad = scrawl.pad.myCanvas,

tweenCounter = 0,

buildStar, addStars,

template;

scrawl.cell[pad.base].set({

backgroundColor: 'black'

})

template = scrawl.makeWheel({

name: 'templateStar',

radius: 4,

fillStyle: 'lightGrey',

scaleOutline: false,

visibility: false,

startX: 300,

startY: 300,

scale: 0.1,

});

buildStar = function(requiredTweens) {

var rand1, rand2, rand3, fast,

x, y, scale, duration, star;

for (var i = 0; i < requiredTweens; i++) {

rand1 = Math.random();

rand2 = Math.round(Math.random() * 600);

rand3 = Math.random();

if (rand1 < 0.25) {

x = 0;

y = rand2;

} else if (rand1 < 0.5) {

x = 600;

y = rand2;

} else if (rand1 < 0.75) {

x = rand2;

y = 0;

} else {

x = rand2;

y = 600;

}

duration = Math.round((rand3 * 3000) + 1000);

scale = 0.5 + ((1 - rand3) * 1.4);

fast = (tweenCounter) ? true : false;

star = template.clone({

name: 'b' + tweenCounter,

fastStamp: fast,

visibility: true,

createNewContext: false

});

scrawl.makeTween({

name: star.name + '_tween',

targets: star,

duration: duration,

cycles: 0,

definitions: [{

attribute: 'startX',

start: 300,

end: x

}, {

attribute: 'startY',

start: 300,

end: y

}, {

attribute: 'scale',

start: 0.1,

end: scale

}]

}).run();

tweenCounter++;

}

}

buildStar(100);

addStars = function() {

buildStar(100);

}

scrawl.addListener('up', addStars, scrawl.canvas.myCanvas);

scrawl.makeAnimation({

fn: function() {

scrawl.render();

testNow = Date.now();

testTime = testNow - testTicker;

testTicker = testNow;

testMessage.innerHTML = 'Stars: ' + tweenCounter + '; milliseconds per screen refresh: ' + Math.ceil(testTime) + '; fps: ' + Math.floor(1000 / testTime);

},

});

};

scrawl.loadExtensions({

path: '/uploads/170101/',

extensions: ['animation', 'wheel', 'images'],

callback: function() {

window.addEventListener('load', function() {

scrawl.init();

mycode();

}, false);

},

});

android+粒子星空动画,HTML5 Canvas星空粒子动画压力测试相关推荐

  1. 粒子背景php,html5+canvas圆形粒子移动背景动画特效

    html5+canvas圆形粒子移动背景动画特效 this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; // ...

  2. html5网站粒子时钟,Html5 canvas实现粒子时钟的示例代码

    这篇文章主要介绍了Html5 canvas实现粒子时钟的示例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 我们先看看粒子时钟的效果,如下: 下面我们将通过canvas和js实 ...

  3. html 画动画效果,html5 canvas绘制曲线动画特效

    特效描述:html5 canvas绘制 曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...

  4. html银河特效编码,html5 canvas银河星系动画特效

    特效描述:html5 canvas 银河星系动画特效.html5 canvas绘制闪闪发光移动的银河星系背景动画特效.(上传服务器正常演示,本地无法直接预览) 代码结构 1. 引入JS 2. HTML ...

  5. html5 运动轨迹绘画,html5 canvas行星运动轨迹动画特效

    特效描述:html5 canvas 行星运动 轨迹动画特效.html5运动轨迹,行星动画特效 代码结构 1. 引入JS 2. HTML代码 Your browser doesn't support c ...

  6. HTML5 Canvas核心技术:图形.动画与游戏开发

    <HTML5 Canvas核心技术:图形.动画与游戏开发> 基本信息 原书名:Core HTML5 Canvas: Graphics, Animation, and Game Develo ...

  7. html5给页面添加树叶特效,html5 canvas树叶光标动画特效

    特效描述:html5 canvas树叶 光标动画特效.html5 canvas虚幻的树叶光标动画. 代码结构 1. 引入JS 2. HTML代码 // Hold mouse down to enter ...

  8. html5 水效果图,HTML5 canvas水波纹动画插件waterrippleeffect.js

    插件描述:这是一款HTML5 canvas水波纹动画特效.该水波纹动画以插件的形式进行编写,可以是纯js插件,或通过jquery插件来进行调用.它能够制作出逼真的水波纹动画效果 使用方法 在页面中引入 ...

  9. html5 canvas基础与动画开发详解-吴华-专题视频课程

    html5 canvas基础与动画开发详解-533人已学习 课程介绍         一.本课程几乎包括所有canvas常用的api用法讲解 二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...

最新文章

  1. R语言使用caretEnsemble包的caretStack函数把多个机器学习模型融合成一个模型、构建融合(集成)预测模型、使用融合模型进行预测推理
  2. python四大软件-Python未来可能面临的四大转折
  3. c语言实现连续几个bit位置1,【C语言简单说】四:常量
  4. 复杂产品的响应式设计【知识篇】
  5. 个人计算机预防勒索病毒,Windows10如何开启预防勒索病毒功能|电脑安全开启防御勒索软件的方法...
  6. 关于s19赛季服务器维修,王者荣耀S19赛季版本更新问题及解决办法一览
  7. android网络工程师,网络工程师题库app下载
  8. 如何将Win7、Win10笔记本,台式机系统C盘软件搬家? 只需3个步骤!!!
  9. 第3.4节 通过GPIB控制频谱仪
  10. 3.3.3 使用集线器的星形拓补
  11. lpush rpush 区别_关于redis之lpush、rpush、lset、lrem
  12. 学习笔记2-面包板的使用
  13. HR面试常见问题汇总
  14. matlab 矩阵除法求方程组的解,线性方程组求解矩阵除法.PPT
  15. Docker学习(七):Docker-compose-wait-for-it.sh脚本
  16. 解读视联网发展阶段之成年篇
  17. IOC框架---什么是IOC
  18. bert模型及其应用场景分享
  19. Every derived table must have its own alias(sql语句错误解决方法)
  20. 转载: 10+公司SWE/DS offer经验

热门文章

  1. 《中国互联网络发展状况统计报告》:网民规模达6.88亿
  2. 小程序中的button按钮
  3. 解决:virtualbox导入ovf报错0X80004005和0xc0000034
  4. PPT中图表类型的选择
  5. django 按经纬度计算距离排序
  6. 数据库关系模式的函数依赖习题讲解
  7. 对象转换为字符串--toString
  8. JSON.parse和JSON.stringify的bug解决
  9. win2016 php mysql_Windows 2016 IIS10.0+PHP+MySQL环境搭建
  10. linux实现git免密登录