JavaScript

语言:

JaveScriptBabelCoffeeScript

确定

(function() {

var boomLength, ctx, descending, ele, height, love_bomb_tomb, setStar, star_num, stars, width;

stars = [];

star_num = 20;

love_bomb_tomb = [];

width = 960;

height = 540;

ele = document.getElementById("canvas");

ctx = ele.getContext('2d');

ele.setAttribute("height", height);

ele.setAttribute("width", width);

setStar = function(index) {

return stars[index] = [Math.random() * width, Math.random() / 10 * height, (Math.random() * 20 + 80) / 100, (Math.random() + 1) / 2 * 6, Math.sin(Math.random() * Math.PI / 8)];

};

descending = function(former, latter) {

return latter[0] - former[0];

};

boomLength = 0;

setInterval(function() {

var bomb, degree, factor, i, j, k, l, m, new_x, new_y, p, pi_in_degree, random_heart_style, random_y_diff, ratio, ref, ref1, ref2, rest_amount, speed, theta;

ctx.clearRect(0, 0, width, height);

ctx.fillstyle = '#000';

ctx.fillRect(0, 0, width, height);

for (i = j = 0, ref = star_num; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {

if (stars[i] == null) {

setStar(i);

}

if (!(stars[i][0] < width && stars[i][1] < height)) {

setStar(i);

}

ratio = stars[i][4];

speed = stars[i][3];

new_x = stars[i][0] += speed * ratio;

new_y = stars[i][1] += speed;

random_y_diff = stars[i][2];

for (p = k = 0; k <= 100; p = ++k) {

ctx.beginPath();

ctx.strokeStyle = "rgba(255, 255, 255," + (1 - p / 100) + ")";

ctx.moveTo(new_x - random_y_diff * p * ratio, new_y - random_y_diff * p);

ctx.lineTo(new_x - random_y_diff * (p - 1) * ratio, new_y - random_y_diff * (p - 1));

ctx.stroke();

}

}

stars.sort(descending);

for (i = l = 0, ref1 = star_num - 1; 0 <= ref1 ? l < ref1 : l > ref1; i = 0 <= ref1 ? ++l : --l) {

if (Math.abs(stars[i][0] - stars[i + 1][0]) < 3) {

if (Math.abs(stars[i][1] - stars[i + 1][1]) < 3) {

love_bomb_tomb[boomLength++] = [50, stars[i][0], stars[i][1]];

setStar(i);

setStar(i + 1);

}

}

}

love_bomb_tomb.sort(descending);

bomb = love_bomb_tomb[0];

if (bomb && bomb[0] > 0) {

rest_amount = bomb[0];

pi_in_degree = 180;

for (degree = m = 0, ref2 = 2 * pi_in_degree; 0 <= ref2 ? m < ref2 : m > ref2; degree = 0 <= ref2 ? ++m : --m) {

random_heart_style = 255 * Math.random() << 0;

ctx.beginPath();

ctx.strokeStyle = "rgba(255, " + random_heart_style + ", " + random_heart_style + ", " + (rest_amount / 50) + ")";

theta = degree / pi_in_degree * Math.PI;

factor = 1 - Math.abs(degree - pi_in_degree) / pi_in_degree;

ctx.moveTo(bomb[1], bomb[2] + 30 * (1 - rest_amount / 50));

ctx.lineTo(bomb[1] - (2 * Math.sin(theta) - Math.sin(2 * theta)) * factor * (50 - rest_amount), bomb[2] - (2 * Math.cos(theta) - Math.cos(2 * theta)) * factor * (50 - rest_amount));

ctx.stroke();

}

return bomb[0] --;

}

}, 1);

}).call(this);

流星雨html5,HTML5/Canvas 流星雨+爱心绽放相关推荐

  1. 2022跨年烟花代码(三)HTML5点击页面烟花绽放特效

    HTML5点击页面烟花绽放特效 <!doctype html> <html> <head> <meta charset="utf-8"&g ...

  2. 别具一格,原创唯美浪漫情人节表白专辑,(复制就可用)(html5,css3,svg)表白爱心代码(4)

    别具一格,独此一家,原创唯美浪漫情人节表白专辑 不一样的惊喜哦~!(html5,css3,svg)表白爱心代码(复制就可用)(4) 目录 款式四:时光的记忆款 1.拷贝完整源代码 2.更新时光盒所显示 ...

  3. 别具一格,原创唯美浪漫情人节表白专辑,(复制就可用)(html5,css3,svg)表白爱心代码(3)

    别具一格,原创唯美浪漫情人节表白专辑, (复制就可用)(html5,css3,svg)表白爱心代码(3) 目录 款式三:心形实时显示认识多长时间桃花飞舞(猫咪)款 1.拷贝完整源代码 2.拷贝完整js ...

  4. 在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动

    最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...

  5. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  6. 使用HTML5的canvas做一个会动的时钟

    这次我们的目标是画一个会和时间同步的时钟,不过没有美学感觉,样子丑的厉害. HTML5支持canvas了,我们可以直接在页面上绘图了,我看了下canvas和GDI+的接口差不多,所以我们先了解些基本的 ...

  7. HTML5 利用canvas API 展示阴影效果

    HTML5的Canvas自带API可以显示阴影效果,主要还是在画布(canvas)的上下文对象(context)上做文章 <!DOCTYPE html> <head> < ...

  8. HTML5画布(CANVAS)速查简表

    >HTML5画布(Canvas)元素 <canvas id="myCanvas" width="500" height="300" ...

  9. HTML5的Canvas画图模拟太阳系运转

    今天研究的是利用HTML5的Canvas画图来模拟太阳系运转,首先,在这个太阳系里分为画轨道和画星球两个部分, 对于每一个星球我们要知道它的颜色和公转周期,如下图. 采用面向对象编程的思想,代码如下 ...

  10. 解决Html5用canvas绘制不出来图片的问题

    转载自   解决Html5用canvas绘制不出来图片的问题 如果使用html5的ctx.drawImage(img,0,0);绘制不出来, 就改为: img.onload = function(){ ...

最新文章

  1. 为什么绩效管理如此重要?有哪些数字化绩效管理工具?
  2. 杨泽业:让你的网站无限可能之给你的网站增加汉字转拼音的新功能
  3. 200余行代码,让你实时从视频中隐身
  4. 给Java初学者的十条小建议,快来收藏吧
  5. 【基础】SQL Server系统库的作用
  6. word break II 对字符串根据已知字典 分解出所有可能组合
  7. FLEX:target和currentTarget属性的区别
  8. swoole mysql 并发_如何用Swoole测试MySQL在特定SQL下的并发性能
  9. imagenet classification with deep convolutional neural networks
  10. bfs (宽度搜素)
  11. 读《About Face 4 交互设计精髓》16
  12. 让你一目了然的商业计划书
  13. matlab绘制椭球ellipsoid函数
  14. 缠中说禅 教你打坐 全集列表
  15. linux 筛选文件,「Linux基础知识」grep文件内容筛选命令的使用
  16. 微博图片去水印,自动去处微博图片水印方法
  17. 【C语言快速上手】带你了解C语言,零基础入门①
  18. windows 查看IP地址或端口是否可以连接-常用命令
  19. 安装和删除Ubuntu双系统
  20. Matlab图形绘制(一)三维曲线

热门文章

  1. HI+AI|吾来助力惠氏CRM喜提「金耳唛杯」
  2. Golang中的GPM模型【面试必考2】
  3. Linux下的文本编辑器介绍
  4. 1131 神犇的悲惨一生
  5. 做一个好管家 Linux系统管理技巧大荟萃
  6. php读取数据显示乱码,php读取数据乱码怎么办
  7. 笔记摘抄div+css
  8. python屏幕录制与回放_monkeyrunner之录制与回放(七)
  9. qq空间 for android,手机QQ空间Android新版发布 支持widget
  10. 不要学计算机,学IT的我已经后悔了