Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
* { margin:0; padding:0; font-family:'Microsoft yahei'; } a { text-decoration:none; } a img { display:block; border:none; } li { list-style:none; } #canvas { background:#000; display:block; }
JavaScript
var can = document.getElementById('canvas'); var cxt = can.getContext('2d'); var w = can.width = window.innerWidth; var h = can.height = window.innerHeight; var num = 200; //生成点的个数 var data = []; //定义一个数组,准备用来存坐标 var move = {}; var liuXY = []; var k = -1; var range = Math.atan(k); var length = 200; //生成num个点,并且存储初始坐标 for (var i = 0; i < num; i++) { data[i] = { x: Math.random() * w, y: Math.random() * h, r: Math.random() * 8 + 3 }; Cricle(data[i].x, data[i].y, data[i].r); }; ! function draw() { cxt.clearRect(0, 0, w, h); for (var i = 0; i < num; i++) { data[i].r += Math.random() * 2 - 1; data[i].r = Math.max(0, data[i].r); data[i].r = Math.min(12, data[i].r); Cricle(data[i].x, data[i].y, data[i].r); }; if (liuXY.length) { for (var i in liuXY) { liuXY[i].cX -= 10; liuX(liuXY[i].cX, liuXY[i].y, liuXY[i].x); if (liuXY[i].cX < 0 || getY(liuXY[i].cX, liuXY[i].y, liuXY[i].x) > h) { liuXY.splice(i, 1); }; }; }; if (Math.random() > 0.98) { var a = Math.random() * (w - 400) + 400; liuXY.push({ x: a, y: 0, cX: a }); }; window.requestAnimationFrame(draw); }(); function liuX(x, sX, sY) { cxt.save(); var y = getY(x, sY, sX); var r = 15; var rad = cxt.createRadialGradient(x, y, 0, x, y, r); rad.addColorStop(0, 'rgba(255,255,255,0.8)'); rad.addColorStop(0.1, 'rgba(255,255,255,0.8)'); rad.addColorStop(0.2, 'rgba(255,255,255,0.08)'); rad.addColorStop(1, 'rgba(255,255,255,0)'); cxt.fillStyle = rad; cxt.beginPath(); cxt.arc(x, y, r, 0, 2 * Math.PI, true); cxt.closePath(); cxt.fill(); cxt.restore(); var wX = x + (Math.cos(range) * length); var wY = y + (Math.sin(range) * length); var x1 = x + 3; var y1 = y; var x2 = x; var y2 = y - 3; cxt.save(); var rad2 = cxt.createRadialGradient(x, y, 0, x, y, length); rad2.addColorStop(0, 'rgba(255,255,255,0.1)'); rad2.addColorStop(1, 'rgba(255,255,255,0)'); cxt.fillStyle = rad2; cxt.beginPath(); cxt.moveTo(x1, y1); cxt.lineTo(x2, y2); cxt.lineTo(wX, wY); cxt.closePath(); cxt.fill(); cxt.restore(); }; function getY(x, startY, startX) { return k * x + startY - k * startX; }; //画点 function Cricle(x, y, r) { cxt.save(); var rad = cxt.createRadialGradient(x, y, 0, x, y, r); rad.addColorStop(0, 'rgba(255,255,255,0.8)'); rad.addColorStop(0.1, 'rgba(255,255,255,0.8)'); rad.addColorStop(0.2, 'rgba(255,255,255,0.08)'); rad.addColorStop(1, 'rgba(255,255,255,0)'); cxt.fillStyle = rad; cxt.beginPath(); cxt.arc(x, y, r, 0, 2 * Math.PI, true); cxt.closePath(); cxt.fill(); cxt.restore(); };
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas星空流星-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号