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 ...
随机推荐
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
- phpstudy2018 安装xdebug扩展
第一步:查看PHP版本信息 第二步:到xdebug下载页去下载最新的版本(注意:要下载PHP对应版本) 第三步:把扩展php_xdebug-2.7.0alpha1-7.2-vc15-nts.dll放到 ...
- win10配置java环境变量,解决javac不是内部或外部命令等问题
win10配置java环境变量,解决javac不是内部或外部命令等问题 https://www.cnblogs.com/qianji/p/6402690.html
- GAITC 2019全球人工智能技术大会(南京)
2019年5月25日至26日,由中国人工智能学会主办,以“交叉.融合.相生.共赢”为主题的2019GAITC将在南京全新亮相. 2019 全球人工智能技术大会(2019 GAITC)以“前端引领.深度 ...
- phpstorm----------phpstorm设置自动更新的ssh信息如何修改--后续增加如何设置自动更新
1.如何设置phpstorm将本地代码时时同步到远程服务器 注意下面一定要打勾 点击下一步,然后还有一个页面,然后不用做任何操作,直接点击完成.中途有个页面是输入远程服务器ip账号密码链接方式的,那个 ...
- Unity之如何使用夜神模拟器logcat
1. 找到夜神模拟器安装目录bin目录,如:D:\Program Files\Nox\bin 2.打开cmd,切到bin目录,如: 3. 输入命令,adb logcat 即可,(可使用命令chcp 6 ...
- codeforces-2
B.chocolates #include<iostream> #include<algorithm> #include<string.h> long long b ...
- 单点登录(SSO)详解
背景 在企业发展初期,企业使用的系统很少,通常一个或者两个,每个系统都有自己的登录模块,运营人员每天用自己的账号登录,很方便.但随着企业的发展,用到的系统随之增多,运营人员在操作不同的系统时,需要多次 ...
- kaggle learn python
def has_lucky_number(nums): return any([num % 7 == 0 for num in nums]) def menu_is_boring(meals): &q ...
- 7zip 18.3性能测试
配置 7zip 18.3 bate3 的性能大幅提升,进行一点简单测试 配置为 E3 1230v2 3.5G 4核心/8线程 12G内存 均为8线程测试 压缩解压一个1.5G的虚拟机磁盘镜像 测试 再 ...