react+canvas实现横跨整个页面的动态的波浪线(贝塞尔曲线)

本来写这个特效 我打算用css实现的,结果是一波三折,我太难了,最终没能用css实现,转战了canvas来实现。来吧先看效果图
在这里插入图片描述
当然这个图的波浪高度、频率、位置、速度都是可调的,请根据自己的需求调整,如果你讲波浪什么的调大一下 还有有摆动的效果哦。

以下是完整代码

import React, { useEffect, useRef } from 'react';
import classNames from 'classnames';
const WaveAnimation = () => {const canvasRef = useRef<HTMLCanvasElement | null>(null);useEffect(() => {const canvas = canvasRef.current;if (canvas) {const ctx = canvas.getContext('2d');console.log('ctx', ctx);if (ctx) {const amplitude = 60;const frequency = 0.006;let phase = 0;const centerY = canvas.height / 2;const startX = -10;const speed = 0.2;const lineColor = 'rgba(255, 255, 255, 0.1)';const animate = () => {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.beginPath();ctx.moveTo(startX, centerY);for (let x = startX; x < canvas.width; x++) {const y = centerY + amplitude * Math.sin(frequency * x + phase);ctx.lineTo(x, y);}ctx.strokeStyle = lineColor;ctx.lineWidth = 10;ctx.stroke();phase -= speed;requestAnimationFrame(animate);};animate();}}}, []);return (<div className="wave-animation"><canvas ref={canvasRef} width="3000" height="300"></canvas></div>);
};export default WaveAnimation;

如果你想看vue的写法,请移步这里

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/179905.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Nginx38】Nginx学习:SSL模块(二)错误状态码、变量及宝塔配置分析

Nginx学习&#xff1a;SSL模块&#xff08;二&#xff09;错误状态码、变量及宝塔配置分析 继续我们的 SSL 模块的学习。上回其实我们已经搭建起了一个 HTTPS 服务器了&#xff0c;只用了三个配置&#xff0c;其中一个是 listen 的参数&#xff0c;另外两个是指定密钥文件的地址…

Rust语言和curl库编写程序

这是一个使用Rust语言和curl库编写的爬虫程序&#xff0c;用于爬取视频。 use std::env; use std::net::TcpStream; use std::io::{BufReader, BufWriter}; ​ fn main() {// 获取命令行参数let args: Vec<String> env::args().collect();let proxy_host args[1].clon…

MobaXterm使用VNC远程显示和控制ubuntu桌面

目录 1 在ubuntu中安装vnc 2 设置ubuntu远程连接 3 MobaXterm中连接ubuntu的vnc 1 在ubuntu中安装vnc 参考&#xff1a;Ubuntu18.04~Ubuntu22.04安装并配置VNC_ubuntu安装vnc-CSDN博客 大体流程就是在ubuntu中安装vnc&#xff0c;设置密码&#xff0c;然后配置服务&#x…

linux+python3.6.8+uwsgi+postgresql+django部署web服务器

linuxpython3.6.8uwsgipostgresqldjango部署web服务器 1.查看系统信息2.配置postgresql数据库2-1.安装postgresql数据库2-2.设置密码2-3.修改postgresql数据库配置文件 3.Python虚拟环境激活虚拟环境 4.Django4-1.Python 安装Django4-2.创建Django项目4-3.配置Django 5.uwsgi5-…

基于python+django+vue开发的酒店预订管理系统 - 毕业设计 - 课程设计

文章目录 源码下载地址项目介绍项目功能界面预览项目备注毕设定制&#xff0c;咨询 源码下载地址 点击这里下载源码 项目介绍 该系统是基于pythondjango开发的酒店预定管理系统。适用场景&#xff1a;大学生、课程作业、毕业设计。学习过程中&#xff0c;如遇问题可在github…

CSS3设计动画样式

CSS3动画包括过渡动画和关键帧动画&#xff0c;它们主要通过改变CSS属性值来模拟实现。我将详细介绍Transform、Transitions和Animations 3大功能模块&#xff0c;其中Transform实现对网页对象的变形操作&#xff0c;Transitions实现CSS属性过渡变化&#xff0c;Animations实现…

ChatGPT 实际上是如何工作的?

添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; ChatGPT 操作的两个主要阶段 我们再用谷歌来打个比方。当你要求谷歌查找某些内容时&#xff0c;你可能知道它不会——在你提出要求的那一刻——出去搜索整个网络来寻找答案。相反&#xff0c;谷歌会在其数…

网络编程套接字(二)

目录 简单的TCP网络程序服务端创建套接字服务端绑定服务端监听服务端获取连接服务端处理请求单执行流服务器的弊端 多进程版TCP网络程序捕捉SIGCHLD信号让孙子进程提供服务多线程版的TCP网络程序客户端创建套接字客户端链接服务器客户端发起请求 线程池版的TCP网络程序 简单的T…

IntelliJ IDEA 2023 最新版如何试用?IntelliJ IDEA 2023最新版试用方法及验证ja-netfilter配置成功提示

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

Rocky9 上安装 redis-dump 和redis-load 命令

一、安装依赖环境 1、依赖包 dnf -y install perl gcc gcc-c zlib-devel2、编译openssl 1.X ### 下载编译 wget https://www.openssl.org/source/openssl-1.1.1t.tar.gz tar xf openssl-1.1.1t.tar.gz cd openssl-1.1.1t ./config --prefix/usr/local/openssl make make ins…

Ubuntu重启后进入initramfs导致无法开机解决方案

今天&#xff0c;我的电脑意外关机&#xff0c;重新开机后打开了虚拟机。该虚拟机使用的是 Ubuntu 22.04 系统。但重启后&#xff0c;系统一直显示(initramfs):&#xff0c;导致无法正常启动。最后&#xff0c;在网上查找了一些解决方案&#xff0c;成功解决了这个开机问题。在…

Java配置47-Spring Eureka 未授权访问漏洞修复

文章目录 1. 背景2. 方法2.1 Eureka Server 添加安全组件2.2 Eureka Server 添加参数2.3 重启 Eureka Server2.4 Eureka Server 升级版本2.5 Eureka Client 配置2.6 Eureka Server 添加代码2.7 其他问题 1. 背景 项目组使用的 Spring Boot 比较老&#xff0c;是 1.5.4.RELEASE…

Minium:专业的小程序自动化工具

小程序架构上分为渲染层和逻辑层&#xff0c;尽管各平台的运行环境十分相似&#xff0c;但是还是有些许的区别&#xff08;如下图&#xff09;&#xff0c;比如说JavaScript 语法和 API 支持不一致&#xff0c;WXSS 渲染表现也有不同&#xff0c;所以不论是手工测试&#xff0c…

腾讯云双十一云服务器活动:88元1年的云服务器难道不香吗?

腾讯云双十一活动中&#xff0c;有三款轻量应用服务器可享受特惠优惠。这三款服务器分别是2核2G、2核4G和4核8G&#xff0c;价格分别为88元/年、166.6元/年和529元/15个月。对于需要低成本而又高性能的服务器需求&#xff0c;轻量应用服务器是一个理想的选择。 轻量应用服务器特…

【错误解决方案】matplotlib绘图中文标签不显示

1. 错误提示 Matplotlib 中文标签不显示的问题通常是由于中文字符在图形中的编码问题导致的。例如&#xff1a; import numpy import matplotlib.pyplot as pltz numpy.arange(-5, 5, .1) sigma_fn numpy.vectorize(lambda z: 1/(1numpy.exp(-z))) sigma sigma_fn(z)fig …

中国等28个国家发布《布莱切利宣言》,鼓励AI以安全方式发展

英国时间11月1日&#xff0c;中国、美国、英国、法国、德国等28个国家和欧盟&#xff0c;在英国的布莱切利庄园签署了&#xff0c;首个全球性人工智能&#xff08;AI&#xff09;声明——《布莱切利宣言》。 该宣言明确指出了AI对人类社会的巨大机遇&#xff0c;但AI需要以人为…

【C语法学习】11 - fprintf()函数

文章目录 1 函数原型2 参数3 返回值4 比较5 示例 1 函数原型 fprintf()&#xff1a;将格式化输出发送至指定流stream&#xff0c;函数原型如下&#xff1a; int fprintf(FILE *stream, const char *format, ...)2 参数 fprintf()函数参数包括三部分&#xff1a; 参数stream…

【数据结构】归并排序 的递归实现与非递归实现

归并排序 前言一、归并排序递归实现&#xff08;1&#xff09;归并排序的核心思路&#xff08;2&#xff09;归并排序实现的核心步骤&#xff08;3&#xff09;归并排序码源详解&#xff08;4&#xff09;归并排序效率分析1&#xff09;时间复杂度 O&#xff08;N*logN&#xf…

分享一个自己写的免费的微信聊天记录提取软件 2023.11.03

有什么办法可以导出与某个人的微信聊天记录&#xff1f; 只想导出与某个微信好友的聊天记录&#xff0c;有办法做到吗&#xff1f;导出所有的话&#xff0c;文件太大了&#xff0c;只想导出与其中一个人的&#xff0c;求大神教。 我的需求和上面这个人的比较类似&#xff0c;因…

JMM讲解

一&#xff1a;为什么要有JMM&#xff0c;它为什么出现&#xff1f; CPU的运行并不是直接操作内存而是先把内存里面的数据读到缓存&#xff0c;而内存的读和写操作的时候会造成不一致的问题。JVM规范中试图定义一种Java内存模型来屏蔽掉各种硬件和操作系统的内存访问差异&…