react + canvas点线动画背景

效果图

实现步骤

1、public文件夹中的index.html引入

2、将变量存起来

// 引入
<script src='./Dot.js'></script>
// 变量存储
<script>window.circle = circle;
</script>

3、组件中使用

constructor(props) {super(props);// 创建一个 ref 来存储 canvas 的 DOM 元素this.canvas = React.createRef();
}
componentDidMount(){new window.circle(100, this.canvas.current);
}
render() {return <canvas  ref={this.canvas} style={{position:'absolute',top:'0'}}></canvas>
}

Dot.js是一个类，用于实现canvas点线动画

以下代码非原创，小小修改了下

代码参考原文地址：https://blog.csdn.net/rudy_zhou/article/details/106051706?utm_medium=distribute.pc_relevant.none-task-blog-utm_term-4&spm=1001.2101.3001.4242

class circle {constructor(num, canvas) {// 由于react不直接操作dom，所以将canvas对象以形参形式传入this.canvas = canvas;this.canvas.width = document.documentElement.clientWidth;this.canvas.height = document.documentElement.clientHeight;this.ctx = this.canvas.getContext('2d');// 创建随机状态小球this.arr = Array.from(new Array(num)).map(item => ({x: Math.random() * this.canvas.width,y: Math.random() * this.canvas.height,speed: Math.random() * 1.5 + 0.5,xDir: Math.random() > 0.5 ? -1:1,yDir: Math.random() > 0.5 ? -1:1,r: 2}))// 小球连线距离this.dist = 300this.animation()window.onresize = ()=> {this.canvas.width = document.documentElement.clientWidth;this.canvas.height = document.documentElement.clientHeight;}}// 计算小球位置并判断方向与绘制drawCircle() {this.arr.forEach(item => {item.x += item.xDir * item.speeditem.y += item.yDir * item.speeditem.x <= 0 && (item.xDir = 1) item.x > this.canvas.width - 1 && (item.xDir = -1, item.x = this.canvas.width - 1)item.y <= 0 && (item.yDir = 1) item.y > this.canvas.height - 1 && (item.yDir = -1, item.y = this.canvas.height - 1)this.ctx.beginPath();this.ctx.arc(item.x, item.y, item.r, 0, 2 * Math.PI);// this.ctx.fillStyle = 'rgb(26,52,135)';this.ctx.fill();})}// 计算连线距离内的小球calcLine() {var arr = this.arr.concat()this.lineArr = []for(var i = 0,len = arr.length; i < len; i++){for(let y = i+1; y < len; y++){let val = Math.sqrt(Math.pow(arr[i].x - arr[y].x, 2) + Math.pow(arr[i].y - arr[y].y, 2) ,2);if(val < this.dist){this.lineArr.push({start: arr[i],end: arr[y],val: val,ratio: (val / this.dist)})}}}}// 绘制链接线条drawLine() {while(this.lineArr.length){this.ctx.beginPath()let item = this.lineArr.shift();let r = 255 * item.ratio;let g = 255 * item.ratio;let b = 255 * item.ratio;this.ctx.strokeStyle = `rgb(${r},${g},${b})`this.ctx.moveTo(item.start.x, item.start.y)this.ctx.lineTo(item.end.x, item.end.y); // 线宽设置，必须放在绘制之前// this.ctx.lineWidth = 4;this.ctx.stroke();}}// 动画过渡animation() {this.canvas.width = this.canvas.widththis.drawCircle()this.calcLine()this.drawLine()setTimeout(() => {this.animation()}, 30)}}

react + canvas点线动画背景相关推荐

【教程】一步一步教你如何自定义设置——博客园canvas/JS交互动画背景
演示步骤的原文链接:(看完就可以掌握如何设置博客园canvas动画背景) 博客园如何自定义设置canvas/JS动画背景 --2018-10-27 本博客的弹弹弹小球-canvas动画原文链接:(看完 ...
html++鼠标跟随动画,5分钟实现Canvas鼠标跟随动画背景
关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧前言相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到 ...
react中实现粒子动画背景----particles-bg
15号考完试放寒假了,芜湖非常开心终于可以拥抱新生活了!快乐. 学长已经去实习了,本来还想再懒懒,刚放假嘛想着玩儿几天吧,但是又觉着之前一段时间因为期末复习也没怎么学习新东西就一鼓作气吧,,对对对最重 ...
canvas太空粒子科技背景
下载地址使用canvas实现的粒子动画效果,结合太空背景图片更显科技感,不错的canvas网页粒子动画背景. dd:
前端canvas粒子动画背景（带鼠标跟随和点击散开）
目录闲聊看下效果先贴下代码吧大概说一下流程下面让我来详细说一下 1.初始化基础属性 2.添加鼠标移动事件并实时更新鼠标坐标 3.通过随机数生成粒子的坐标和横纵轴速度 4.渲染粒子并将粒子对象 ...
html圆点跟链接线,html5 canvas简洁的圆点线动画特效
特效描述:html5 canvas简洁的圆点线动画特效.html5 canvas绘制简洁动画特效,圆点和线条连接的背景动画特效. 代码结构 1. HTML代码在美国的研究我们一起可以在学术界产生 ...
html5动态连线,canvas简单连线动画的实现代码
前言:canvas动画入门系列之简单连线动画.虽然简单,但连线动画应用场景还挺多,因此做了个小demo,一通百通. step1:绘制点首先创建个标签设置几个点的坐标 const points = ...
Canvas炫酷3D线条动画背景
下载地址 Canvas炫酷3D线条动画背景,可以变色的颜色渐变网页动态背景特效. dd:
粒子背景php,html5+canvas圆形粒子移动背景动画特效
html5+canvas圆形粒子移动背景动画特效 this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; // ...

react + canvas点线动画背景

效果图

实现步骤

1、public文件夹中的index.html引入

2、将变量存起来

3、组件中使用

Dot.js是一个类，用于实现canvas点线动画

react + canvas点线动画背景相关推荐

最新文章

热门文章