<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>离子星空</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#myCanvas {
background-color: black;
}
</style>
</head>

<body>
<canvas id="myCanvas"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
var ctx = canvas.getContext("2d");
//创建小球的构造函数
function Ball() {
this.x = randomNum(3, canvas.width - 3);
this.y = randomNum(3, canvas.height - 3);
this.r = randomNum(1, 3);
this.color = randomColor();
this.speedX = randomNum(-3, 3) * 0.2;
this.speedY = randomNum(-3, 3) * 0.2;
}
Ball.prototype = {
//绘制小球
draw: function () {
ctx.beginPath();
ctx.globalAlpha = 1;
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fill();
},
//小球移动
move: function () {
this.x += this.speedX;
this.y += this.speedY;
//为了合理性,设置极限值
if (this.x <= 3 || this.x > canvas.width - 3) {
this.speedX *= -1;
}
if (this.y <= 3 || this.y >= canvas.height - 3) {
this.speedY *= -1;
}
}
}
//存储所有的小球
var balls = [];
//创建200个小球
for (var i = 0; i < 150; i++) {
var ball = new Ball();
balls.push(ball);
}
main();

function main() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
//鼠标移动绘制线
mouseLine();
//小球与小球之间自动画线
drawLine();
//使用关键帧动画，不断的绘制和清除
window.requestAnimationFrame(main);
}
//添加鼠标移动事件
//记录鼠标移动时的mouseX坐标
var mouseX;
var mouseY;
canvas.onmousemove = function (e) {
var ev = event || e;
mouseX = ev.offsetX;
mouseY = ev.offsetY;
}
//判断是否划线

function drawLine() {
for (var i = 0; i < balls.length; i++) {
balls[i].draw();
balls[i].move();
for (var j = 0; j < balls.length; j++) {
if (i != j) {
if (Math.sqrt(Math.pow((balls[i].x - balls[j].x), 2) + Math.pow((balls[i].y - balls[j].y), 2)) < 80) {
ctx.beginPath();
ctx.moveTo(balls[i].x, balls[i].y);
ctx.lineTo(balls[j].x, balls[j].y);
ctx.strokeStyle = "white";
ctx.globalAlpha = 0.2;
ctx.stroke();
}
}
}
}
}
//使用鼠标移动划线

function mouseLine() {
for (var i = 0; i < balls.length; i++) {
if (Math.sqrt(Math.pow((balls[i].x - mouseX), 2) + Math.pow((balls[i].y - mouseY), 2)) < 80) {
ctx.beginPath();
ctx.moveTo(balls[i].x, balls[i].y);
ctx.lineTo(mouseX, mouseY);
ctx.strokeStyle = "white";
ctx.globalAlpha = 0.8;
ctx.stroke();
}
}
}
//随机函数

function randomNum(m, n) {
return Math.floor(Math.random() * (n - m + 1) + m);
}
//随机颜色

function randomColor() {
return "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")";
}
</script>

</html>

---------------------
作者：motokay
来源：CSDN
原文：https://blog.csdn.net/qq_37506861/article/details/77510847
版权声明：本文为博主原创文章，转载请附上博文链接！

canvas实现粒子星空连线的更多相关文章

  1. canvas多彩粒子星空背景

    HTML5 canvas 实现多颜色粒子星空页面背景,喜欢的可以收藏.自己可以定义颜色,粒子透明度,粒子数量,粒子大小. 预览效果图如下: 1.获取canvas上下文,并且动态设置canvas尺寸和屏 ...

  2. canvas绘制经典星空连线效果

    来自:https://segmentfault.com/a/1190000009675230 下面开始coding:先写个canvas标签 <canvas height="620&qu ...

  3. canvas绘图，html5 k线图，股票行情图

    canvas绘图,html5 k线图,股票行情图 canvas跟其他标签一样,也可以通过css来定义样式.但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canva ...

  4. 《每周一点canvas动画》——3D点线与水波动画

    <每周一点canvas动画>--差分函数的妙用 每周一点canvas动画代码文件 好像上次更新还是十一前,这唰唰唰的就过去大半个月了,现在才更新实在不好意思.这次我们不涉及canvas 3 ...

  5. 【canvas】跟随鼠标的星空连线

    2019-01-23 19:57:38 挂一个比较简单的一个canvas应用,利用CPU进行粒子实时计算,直接面向过程写的 帧动画:浏览器在下一个动画帧安排一次网页重绘,  requestAnimat ...

  6. canvas背景粒子动态变化动画

    var canvas = document.getElementById("cas"); var ctx = canvas.getContext("2d"); ...

  7. 用Canvas玩3D：点-线-面

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 玩Canvas玩了有两三个礼拜了,平面的东西玩来玩去也就那样,所以就开始折腾3D了. 因为Canvas画布终究还是平面的,所以要有3D就得 ...

  8. HTML5 <Canvas>文字粒子化

    文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  9. canvas放射粒子效果

    这个也是别人的代码,就不多介绍了 写了些注释 body { overflow:hidden; margin:0; padding:0; background-color:#222222 } </ ...

随机推荐

  1. bzoj 1962: 模型王子

    呵呵呵呵http://wenku.baidu.com/link?url=o0CPVzuBDLJMt0_7Qph1T7TtdFOzu7O-apIpvaWbIYMz8ZWqBneGqI8LGtLdqpuK ...

  2. mysql怎么查看当前登录用户

    mysql> select user();+----------------+| user()         |+----------------+| root@localhost |+--- ...

  3. 三十四、在SAP的屏幕选择中，将英文替换成我们想要的文本内容

    一.我们在代码中定义了一个选择屏幕,但是对应的显示界面为英文 界面如下 二.我们选择[转到]-[文本元素] 三.默认的文本内容是问号和三个点 四.我们修改成我们需要的,并激活这个文本,如果不激活会丢失 ...

  4. 留学Essay写作中常见的两类要求词盘点

    写essay的时候,我们会常常因为各式各样的要求词而头疼:discuss,describing,evaluate,explain,等等,他们之间有何区别?如果你在思考这个问题,那么这篇文章就是为你写的 ...

  5. 类成员之迭代iter

    class B: def __init__(self,name,age): self.name = name self.age = age #创建迭代方法 def __iter__(self): re ...

  6. Apache nifi 第一篇(概述)

    1.什么是Apache NiFi? 简单地说,NiFi是为了自动化系统之间的数据流.虽然数据流这种形式很容易理解,但我们在此使用它来表示系统之间的自动化和不同系统之间数据的流转.企业拥有多个系统,其中 ...

  7. 面向对象第二个特征-继承(Inheritance)

    面向对象第二个特征-继承(Inheritance) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.java中的继承概述 1>.继承概述 多个类种存在相同属性和行为时,讲这 ...

  8. 电脑使用热键时是否需按住Fn键相关说明

    ThinkPad E系列机型 方法一: 在开机出现ThinkPad标志时,连续点F1(若无反应,请尝试Fn+F1)进入BIOS设置. 在BIOS中,依次选择Config---Keyboard/Mous ...

  9. DevOps专题|玩转Kubernetes网络

    Kubernetes无疑是当前最火热的容器编排工具,网络是kubernetes中非常重要的一环, 本文主要介绍一些相应的网络原理及术语,以及kubernetes中的网络方案和对比. Kubernete ...

  10. LIS是什么？【标本分拣】

    接之前[LIS是什么?]中,提到几点需要补充描述的部分. Ⅰ.标本分管处理 标本的分管处理,在医院和第三方实验室有多种叫法,例如:分拣.合管等等.这里我称之为分拣,分拣实际上分为两个部分:系统中标本分 ...