canvas连线特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#myCanvas {
background-color: black;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
myCanvas.width = width;
myCanvas.height = height; var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "white";
ctx.strokeStyle = "rgba(255, 255, 255, .3)";
function Star(ctx, x, y, r){
this.ctx = ctx;
this.x = x;
this.y = y;
this.r = r;
this.x_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;
this.y_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;
}
Star.prototype.render = function(){
this.ctx.beginPath();
this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
this.ctx.closePath();
this.ctx.fill();
}
Star.prototype.move = function(){
this.x -= this.x_speed;
this.y -= this.y_speed;
}
Star.prototype.changeX = function(){
this.x_speed = -this.x_speed;
}
Star.prototype.changeY = function(){
this.y_speed = -this.y_speed;
} var mouse_star = new Star(ctx, 0, 0, 1);
var arr = [];
document.onmousemove = function(e){
mouse_star.x = e.clientX;
mouse_star.y = e.clientY;
} document.onclick = function(e){
for (var i = 0; i < 5; i++) {
arr.push(new Star(ctx, e.clientX, e.clientY, 1));
};
setTimeout(function(){
for (var i = 0; i < 5; i++) {
arr.pop();
};
},3000)
} for (var i = 0; i < 100; i++) {
arr.push(new Star(ctx, Math.random() * width, Math.random() * height, 1));
};
setInterval(function(){
ctx.clearRect(0, 0, width, height);
mouse_star.render(); arr.forEach(function(value, index){
value.move();
if (value.x < 0 || value.x > width ) {
value.changeX();
};
if (value.y < 0 || value.y > height) {
value.changeY();
};
value.render();
}); arr.forEach(function(value, index){
for (var i = index; i < arr.length; i++){
if (Math.abs(value.x-arr[i].x) < 50 && Math.abs(value.y - arr[i].y) < 50 ) {
line(value.x, value.y, arr[i].x, arr[i].y);
};
}
if(Math.abs(value.x - mouse_star.x) < 150 && Math.abs(value.y - mouse_star.y) < 150) {
line(value.x, value.y, mouse_star.x, mouse_star.y);
}
})
}, 20);
function line(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.closePath();
ctx.stroke();
}
</script>
</body>
</html>
canvas连线特效的更多相关文章
- canvas之背景特效
需具备js基础知识以及canvas相关方法(可查阅相关文档) 下面是一篇有关js与canvas的背景特效 基于面向过程的思维 <!DOCTYPE html> <html> &l ...
- HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
- Canvas与javaScript特效笔记
第六章 Canvas与javaScript特效笔记 q <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...
- 兼容IE浏览器的canvas画线和圆圈
1.新建test.html文件,代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8& ...
- CANVAS模仿龙卷风特效
大学时候,有一段时间对flash比较感兴趣.去图书馆借了一本很厚很厚的falsh书籍. 翻了几页之后,就再没有往后看过.印象比较深的是作者说他用flash完成了一个龙卷风效果. 一直到现在我也没有看到 ...
- canvas 画线
一.canvas是基于状态的绘图环境 1.canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWi ...
- 结合canvas做雨滴特效
雨滴特效 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- canvas绘制线和矩形
###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...
- canvas星空背景特效+CSS旋转相册学习
今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...
随机推荐
- __add__,关于运算符重载(用户权限)
1.首先定义三种用户类型:普通用户.管理员.超级管理员,不同用户类型的用户权限关系如下: 先看一段代码: class Scope(): # 定义一个基类,因为每个权限类都需要add()方法 allow ...
- linux 按文件大小排序
1.按文件大小查看文件 a.降序:ls -lsh moudaen@morton:~$ ls -lsh total 20M 20M -rw-r–r– 1 moudaen 65536 20M Nov 11 ...
- 当安全遇到java
标题是随便取的 今天看到有篇文章写的是关于java的xss,文中还提到了一个面试题,刚好我曾经也被问到过这个问题.让我不禁想起以往遇到的一些和java相关的安全面试题. 现如今,很多大甲方,由于自己系 ...
- linux----------VMware如何链接局域网其它电脑上的虚拟机,选择桥接模式即可。仔细阅读虚拟机的三个连接方式
VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式).要想在网络管理和维护中合理应用它们,你就应该先了解一下这三种工作模式. ...
- WPF线程中获取控件的值和给控件赋值
WPF中使用线程操作控件,按平常的操作方法操作的话会报异常:调用线程无法访问此对象,因为另一个线程拥有该对象.所以我们要使用Dispatcher类的BeginInvoke()与Invoke()方法.B ...
- git反悔
Checkout checkout命令用于从历史提交(或者暂存区域)中拷贝文件到工作目录,也可用于切换分支.  ![ ...
- vue-cli@2的原理解析
作为一个菜鸟,我有一颗好奇的心,每当vue init 的时候,看到那流畅的进度和神奇的结果,心里都充满一窥其本质的期望…… 以下就是我不断的console,大致理出来的一个流程心得,纪录在此,以作备忘 ...
- CentOS7 源码编译安装Tengine
简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.它的目的是打造一个高效.安全的Web平台. 发展 Tengine的性能和 ...
- CentOS 7 Squid代理服务器正向代理-传统代理
Squid是Linux系统中最常用的一款开源代理服务软件,主要提供缓存加速和应用层过滤控制的功能,可以很好的实现HTTP.FTP.DNS查询以及SSL等应用的缓存代理 传统代理:普通的代理服务,多见于 ...
- /bin, /sbin & /usr/bin, /usr/sbin & /usr/local/bin, /usr/local/sbin & glibc
操作系统为自身完成启动所需要的 /bin, /sbin 系统基本管理所需要的 /usr/bin, /usr/sbin 第三方的 /usr/local/bin, /usr/local/sbin 核心库 ...