Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Canvas not supported.
css
* { font-family: "arial black", Helvetica, verdana, monospace, sans-serif; letter-spacing: 0.2rem; margin: 0; padding: 0; color: #fff; overflow: hidden; } body { position: relative; } canvas#canvas { display: block; background: #000; } #filter { position: absolute; top: 50%; left: 0; width: 100%; height: 50%; background: rgba(0, 0, 0, 0.6); }
JavaScript
/* * File Name / meteorShowerOnHorizon.js * Created Date / Aug 13, 2020 * Aurhor / Toshiya Marukubo */ (function () { 'use strict'; window.addEventListener('load', function () { var canvas = document.getElementById('canvas'); if (!canvas || !canvas.getContext) { return false; } /******************** Random Number ********************/ function rand(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } /******************** Var ********************/ var ctx = canvas.getContext('2d'); var X = canvas.width = window.innerWidth; var Y = canvas.height = window.innerHeight; var mouseX = X; var mouseY = Y; var shapeNum = 1000; var shapes = []; var startColor = rand(0, 360); var style = { black: 'black', white: 'white', lineWidth: 4, }; if (X < 768) { shapeNum = 500; } /******************** Animation ********************/ window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(cb) { setTimeout(cb, 17); }; /******************** Shape ********************/ function Shape(ctx, x, y, c) { this.ctx = ctx; this.init(x, y, c); } Shape.prototype.init = function(x, y, c) { this.x = x; this.y = y; this.c = c; this.r = rand(1, 2); this.l = rand(0, 100); this.sl = this.l; this.ga = Math.random(); this.v = { x: rand(-1, 1) * Math.random(), y: 0 }; }; Shape.prototype.draw = function() { var ctx = this.ctx; ctx.save(); ctx.globalAlpha = this.ga; ctx.globalCompositeOperation = 'lighter'; ctx.fillStyle = 'hsl(' + this.c + ', 80%, 60%)'; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false); ctx.fill(); ctx.restore(); }; Shape.prototype.updateParams = function() { var ratio = this.l / this.sl * 1.1; this.r *= ratio; this.x += this.v.x; this.v.y = Y / 2 - this.y; this.y += this.v.y / 30; this.l -= 1; if (this.l < 0) { this.c += 10; this.init(rand(0, X), Y / 2 * Math.random(), this.c); } }; Shape.prototype.render = function(i) { this.updateParams(); this.draw(); ctx.translate(0, Y); ctx.scale(1, -1); this.draw(); }; for (var i = 0; i < shapeNum; i++) { var s = new Shape(ctx, rand(0, X), Y / 2 * Math.random(), startColor); shapes.push(s); } /******************** Render ********************/ function render() { //ctx.clearRect(0, 0, X, Y); ctx.globalCompositeOperation = "darken"; ctx.globalAlpha = 0.1; ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, X, Y); ctx.globalCompositeOperation = "source-over"; ctx.globalAlpha = 1; for (var i = 0; i < shapes.length; i++) { shapes[i].render(i); } requestAnimationFrame(render); } render(); /******************** Event ********************/ function onResize() { X = canvas.width = window.innerWidth; Y = canvas.height = window.innerHeight; if (X < 768) { shapeNum = 500; } else { shapeNum = 1000; } } window.addEventListener('resize', function() { onResize(); }); window.addEventListener('mousemove', function(e) { mouseX = e.clientX; mouseY = e.clientY; }, false); }); })();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯JavaScript地平线上的流星淋浴-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号