android+粒子星空动画,HTML5 Canvas星空粒子动画压力测试
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星空粒子动画压力测试相关推荐
- 粒子背景php,html5+canvas圆形粒子移动背景动画特效
html5+canvas圆形粒子移动背景动画特效 this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; // ...
- html5网站粒子时钟,Html5 canvas实现粒子时钟的示例代码
这篇文章主要介绍了Html5 canvas实现粒子时钟的示例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 我们先看看粒子时钟的效果,如下: 下面我们将通过canvas和js实 ...
- html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制 曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
- html银河特效编码,html5 canvas银河星系动画特效
特效描述:html5 canvas 银河星系动画特效.html5 canvas绘制闪闪发光移动的银河星系背景动画特效.(上传服务器正常演示,本地无法直接预览) 代码结构 1. 引入JS 2. HTML ...
- html5 运动轨迹绘画,html5 canvas行星运动轨迹动画特效
特效描述:html5 canvas 行星运动 轨迹动画特效.html5运动轨迹,行星动画特效 代码结构 1. 引入JS 2. HTML代码 Your browser doesn't support c ...
- HTML5 Canvas核心技术:图形.动画与游戏开发
<HTML5 Canvas核心技术:图形.动画与游戏开发> 基本信息 原书名:Core HTML5 Canvas: Graphics, Animation, and Game Develo ...
- html5给页面添加树叶特效,html5 canvas树叶光标动画特效
特效描述:html5 canvas树叶 光标动画特效.html5 canvas虚幻的树叶光标动画. 代码结构 1. 引入JS 2. HTML代码 // Hold mouse down to enter ...
- html5 水效果图,HTML5 canvas水波纹动画插件waterrippleeffect.js
插件描述:这是一款HTML5 canvas水波纹动画特效.该水波纹动画以插件的形式进行编写,可以是纯js插件,或通过jquery插件来进行调用.它能够制作出逼真的水波纹动画效果 使用方法 在页面中引入 ...
- html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习 课程介绍 一.本课程几乎包括所有canvas常用的api用法讲解 二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...
最新文章
- R语言使用caretEnsemble包的caretStack函数把多个机器学习模型融合成一个模型、构建融合(集成)预测模型、使用融合模型进行预测推理
- python四大软件-Python未来可能面临的四大转折
- c语言实现连续几个bit位置1,【C语言简单说】四:常量
- 复杂产品的响应式设计【知识篇】
- 个人计算机预防勒索病毒,Windows10如何开启预防勒索病毒功能|电脑安全开启防御勒索软件的方法...
- 关于s19赛季服务器维修,王者荣耀S19赛季版本更新问题及解决办法一览
- android网络工程师,网络工程师题库app下载
- 如何将Win7、Win10笔记本,台式机系统C盘软件搬家? 只需3个步骤!!!
- 第3.4节 通过GPIB控制频谱仪
- 3.3.3 使用集线器的星形拓补
- lpush rpush 区别_关于redis之lpush、rpush、lset、lrem
- 学习笔记2-面包板的使用
- HR面试常见问题汇总
- matlab 矩阵除法求方程组的解,线性方程组求解矩阵除法.PPT
- Docker学习(七):Docker-compose-wait-for-it.sh脚本
- 解读视联网发展阶段之成年篇
- IOC框架---什么是IOC
- bert模型及其应用场景分享
- Every derived table must have its own alias(sql语句错误解决方法)
- 转载: 10+公司SWE/DS offer经验
热门文章
- 《中国互联网络发展状况统计报告》:网民规模达6.88亿
- 小程序中的button按钮
- 解决:virtualbox导入ovf报错0X80004005和0xc0000034
- PPT中图表类型的选择
- django 按经纬度计算距离排序
- 数据库关系模式的函数依赖习题讲解
- 对象转换为字符串--toString
- JSON.parse和JSON.stringify的bug解决
- win2016 php mysql_Windows 2016 IIS10.0+PHP+MySQL环境搭建
- linux实现git免密登录