js canvas实现星空连线背景特效
本文实例为大家分享了js canvas星空连线背景的具体代码，供大家参考，具体内容如下
<html>
<head>
<meta charset="UTF-8">
<title>canvas星空连线背景特效</title>
<style type="text/css">
body{
margin: 0;
}
#canvas{
display: block;
background: #000;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
function Starry(){
this.cxt=canvas.getContext("2d");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
this.cW=canvas.width;
this.cH=canvas.height;
this.num=200;
this.data=[];
}
Starry.prototype={
init: function(){
for (var i=0;i<this.num;i++) {
this.data[i]={
x:Math.random()*this.cW,
y:Math.random()*this.cH,
cX:Math.random()*0.6-0.3,
cY:Math.random()*0.6-0.3
};
this.drawCircle(this.data[i].x,this.data[i].y);
}
},
drawCircle: function(x,y){
var cxt=canvas.getContext("2d");
cxt.save();//保存路径
cxt.fillStyle="pink";
cxt.beginPath();//开始路径
cxt.arc(x,y,1,0,Math.PI*2,false);
cxt.closePath();//结束路径
cxt.fill();//填充方法
cxt.restore();//释放路径
},
drawLine: function(x1,y1,x2,y2){
var cxt=this.cxt;
var color=cxt.createLinearGradient(x1,y1,x2,y2);
color.addColorStop(0,"yellow");
color.addColorStop(1,"green");
cxt.save();
cxt.strokeStyle=color;
cxt.beginPath();//开始路径
cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.closePath();//结束路径
cxt.stroke();//填充方法
cxt.restore();//释放路径
},
moveCircle: function(){
var self=this;
self.cxt.clearRect(0,0,self.cW,self.cH);
for(var i=0;i<self.num;i++){
self.data[i].x+=self.data[i].cX;
self.data[i].y+=self.data[i].cY;
if(self.data[i].x>self.cW||self.data[i].x<0){
self.data[i].cX=-self.data[i].cX;
}
if(self.data[i].x>self.cH||self.data[i].y<0){
self.data[i].cY=-self.data[i].cY;
}
this.drawCircle(self.data[i].x,self.data[i].y);
for(var j=i+1;j<self.num;j++){
if(Math.pow(self.data[i].x-self.data[j].x,2)
+Math.pow(self.data[i].y-self.data[j].y,2)
<=50*50){
self.drawLine(self.data[i].x,self.data[i].y,
self.data[j].x,self.data[j].y);
}
}
}
}
}
var starry=new Starry();
starry.init();
setInterval(function(){starry.moveCircle();},1);
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现漂亮的星空背景
本文实例为大家分享了js实现漂亮星空背景的具体代码,供大家参考,具体内容如下 html代码: <div class="stars"></div> css代码 html, body { height: 100%; overflow: hidden; } body { width: 100%; height:100%; background: #000; background-size: 100%; perspective: 500px; } .stars { po
-
js星空效果代码
星空效果_www.jb51.net ABCD [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
JS+canvas画布实现炫酷的旋转星空效果示例
本文实例讲述了JS+canvas画布实现炫酷的旋转星空效果.分享给大家供大家参考,具体如下: canvas是html5的新标签,其画布功能尤为强大.当然了canvas在IE10以下浏览器是不兼容的,所以呢为了特效肯定是牺牲一定的兼容性.这里呢,分享一个基于canvas开发的浩瀚星河插件,其实这个源代码是网上下载的,我把它整合了一下,重新封装一些参数提供更多的可改项. 首先引入两个javascript脚本,一个是jquery插件,另一个是封装好的cosmos_canvas.js <script s
-
JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下 这里我截取的是一个图片,实际上是会动的.废话不多说,上代码. HTML: <canvas id="canvas"></canvas> CSS: /*css reset */ body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav { margin: 0; padding: 0; } html,body {
-
js实现旋转的星空效果
本文实例为大家分享了js实现旋转的星空效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta nam
-
使用3D引擎threeJS实现星空粒子移动效果
three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象. 下载地址: http://threejs.org/ 首先创建一个HTML文件,引入three.js引擎包. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl
-
js实现宇宙星空背景效果的方法
本文实例讲述了js实现宇宙星空背景效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/xhtml&qu
-
js canvas实现星空连线背景特效
本文实例为大家分享了js canvas星空连线背景的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>canvas星空连线背景特效</title> <style type="text/css"> body{ margin: 0; } #canvas{ display: block; background: #000; ma
-
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> JS配合CSS实现的漂亮渐变背景特效6个实例 </title> <script> var setGradient = (function() { var p_dCanvas = document.createElement('canvas'); var p_useCanvas =
-
js+canvas实现网站背景鼠标吸附线条动画
本文实例为大家分享了js+canvas实现网站背景鼠标吸附线的具体代码,供大家参考,具体内容如下 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> ! function
-
js canvas实现随机粒子特效
本文实例为大家分享了js canvas随机粒子特效的具体代码,供大家参考,具体内容如下 前言 canvas实现前端的特效美术 结果展示 代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&qu
-
js+canvas实现两张图片合并成一张图片的方法
本文实例讲述了js+canvas实现两张图片合并成一张图片的方法.分享给大家供大家参考,具体如下: JS和canvas的合成方式 function drawAndShareImage(){ var canvas = document.createElement("canvas"); canvas.width = 700; canvas.height = 700; var context = canvas.getContext("2d"); context.rect(
-
js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五子棋</title> <style> * { margin: 0; padding: 0; } body { margin-to
-
原生js+canvas实现验证码
本文实例为大家分享了js+canvas实现验证码的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> canvas { border: 1p
-
js canvas实现滑块验证
本文实例为大家分享了js canvas实现滑块验证的具体代码,供大家参考,具体内容如下 滑块验证 话不多说先上代码想用的小伙伴可以直接使用,想了解的我后面会说下我的思路 <template> <div class="sliderContent"> <div class="imgDev" :style="'width:' + width + 'px;'"> <canvas :id="id"