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.mzph.cn/news/132457.shtml

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

相关文章

前端框架Vue学习 ——(六)Vue组件库Element

文章目录 Element 介绍快速入门常见组件表格分页Dialog 对话框组件表单 Container 布局容器 Element 介绍 Element&#xff1a;是饿了么团队研发的&#xff0c;一套为开发者、 设计师和产品经理准备的基于Vue 2.0的桌面端组件库。 组件&#xff1a;组成网页的部件&#xff0c;…

【Unity】2D角色跳跃控制器

最近加了学校的Nova独游社&#xff0c;本文是社团出的二面题&#xff0c;后续有时间优化下可能会做成一个二维冒险小游戏。本文主要涉及相关代码&#xff0c;参考教程&#xff1a;《勇士传说》横版动作类游戏开发教程 效果演示 【Unity】2D角色跳跃模拟器 主要实现功能&#xf…

CV计算机视觉每日开源代码Paper with code速览-2023.11.2

精华置顶 墙裂推荐&#xff01;小白如何1个月系统学习CV核心知识&#xff1a;链接 点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【目标检测】Re-Scoring Using Image-Language Similarit…

Spring Boot 整合SpringSecurity和JWT和Redis实现统一鉴权认证

&#x1f4d1;前言 本文主要讲了Spring Security文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &#x1f304;每日一句&#xff1a;努力…

多功能声学综合馆:空间的“膜法师”

建筑是文明的承载者&#xff0c;是历史的见证者&#xff0c;也是城市的象征。但在现代都市中&#xff0c;我们不仅需要“固定”的建筑&#xff0c;更需要灵活与多功能性的空间。而这&#xff0c;正是多功能声学综合馆为我们带来的“膜法”。 不仅仅是建筑&#xff0c;更是艺术的…

【文末送书】【Java中的异常处理机制】提供常见的异常报错详情及其解决方案

本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(注明:作者:王文峰…

【技术干货】开源库 Com.Gitusme.Net.Extensiones.Core 的使用

目录 1、项目介绍 2、为项目添加依赖 3、代码中导入命名空间 4、代码中使用 示例 1&#xff1a;string转换 示例 2&#xff1a;object转换 1、项目介绍 Com.Gitusme.Net.Extensiones.Core是一个.Net扩展库。当前最新版本1.0.4&#xff0c;提供了常见类型转换&#xff0c…

专精特新申报条件

&#xff08;一&#xff09;申报条件 申报企业须满足《山东省“专精特新”中小企业认定管理办法》&#xff08;鲁工信发〔2020〕7号&#xff09;所列条件。其中&#xff0c;企业近两年平均营业收入增速调整为不低于5%&#xff0c;其他条件不变。2018年认定的山东省“专精特新”…

Linux认证 | RHCA是什么等级的证书?考到工资能有多少?

RHCA就是红帽认证架构师&#xff0c;RHCA是红帽公司在红帽认证工程师&#xff08;RHCE&#xff09;和红帽认证技师&#xff08;RHCT&#xff09;认证推出之后又一个最新的顶级认证&#xff0c;在业界也是最受欢迎的、最成熟的linux认证。 那么RHCA是什么等级的证书&#xff1f…

asp.net上传文件

第一种方法 前端&#xff1a; <div> 单文件上传 <form enctype"multipart/form-data" method"post" action"upload.aspx"> <input type"file" name"files" /> …

Amazon EC2 安全可调用的云虚拟主机服务器

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Amazon EC2 打造全新的科技链 Amazon Elastic Compute Cloud&#xff08;Amazon EC2&#xff09;提供最广泛、最深入的计算平台&#xff0c;拥有超过 500 个实例&…

【C++ 学习 ㉝】- C++11 使用 using 定义别名

众所周知&#xff0c;在 C 中可以使用 typedef 定义类型别名&#xff0c;例如&#xff1a; typedef unsigned int u_int; typedef void(*pf)(int, int); 但它也有一些限制&#xff0c;比如&#xff0c;无法定义类模板别名。当我们需要实现一个 key_type 固定为 string&#x…

50个网络运维工作者必须知道的小知识!建议收藏!

运维人员对公司互联网业务所依赖的基础设施、基础服务、线上业务进行稳定性加强&#xff0c;进行日常巡检发现服务可能存在的隐患&#xff0c;对整体架构进行优化以屏蔽常见的运行故障&#xff0c;多数据中接入提高业务的容灾能力。 通过监控、日志分析等技术手段&#xff0c;…

服务器经常被攻击的原因

很多中小型企业都是选择虚拟主机服务器&#xff0c;是把一个服务器分成很多个给很多企业一起共用&#xff0c;可能同一个 IP服务器上就有很多个不同企业的网站&#xff0c;这个时候如果跟你同一个IP服务器的网站遭到DDoS攻击&#xff0c;就很有可能会影响到你的网站也无法正常访…

golang的panic与recover基本使用

package mainimport ("errors""fmt" )func main() {// panic会使得程序会终止//panicDemo1()//panicDemo2()//fmt.Println(panicDemo3())panicDemo5()fmt.Println("程序正常执行...") }panicDemo1函数测试 func panicDemo1() {panic("抛出…

【数据集映射】(含完整可行Python代码)Yolo格式数据(txt)转RCNN格式数据(coco)

1&#xff1a;需求背景 目标检测研究中&#xff0c;通常不同的模型需要不同的数据格式&#xff0c;如yolo需要txt、rcnn需要coco等&#xff0c;因此就需要对标注的数据格式进行转换。 通常的数据格式有txt、coco(json)、Pascal VOC、xml等。 本文的需求是txt转coco&#xff…

Java中各个版本JDK分别有哪些常见的垃圾回收算法?它们的适用场景和开启方法是什么?

Java中各个版本JDK分别有哪些常见的垃圾回收算法&#xff1f;它们的使用场景和开启方法是什么&#xff1f; 1.1 JDK 1.8 中的垃圾回收算法1.2 JDK 11 中的垃圾回收算法1.3 JDK17中的垃圾回收算法 1.1 JDK 1.8 中的垃圾回收算法 Java 8引入了一些不同类型的垃圾回收算法&#x…

nginx配置支持PHP

前言 Nginx是通过php-fpm来通信的&#xff0c;所以需要修改的监听9000端口。 当 Nginx 配置支持 PHP 时&#xff0c;它可以将 PHP 请求转发给 PHP-FPM&#xff0c;由 PHP-FPM 处理请求并返回结果。 要配置 Nginx 支持 PHP&#xff0c;你需要在 Nginx 配置文件中添加一个 locat…

如何修改CentOS登录时默认目录

查了一下&#xff0c;有说改/etc/passwd文件的&#xff0c;有说改.bashrc文件的&#xff0c;也有说改.bash_profile&#xff0c;修改的方法都不一样。 我要改的是root登录时的目录&#xff0c;最后修改了/root/.bash_profile文件&#xff0c;只要加一行cd 路径就可以。 这个文…

关于中间件技术

中间件是一种独立的系统软件或服务程序&#xff0c;可以帮助分布式应用软件在不同的技术之间共享资源。中间件可以&#xff1a; 1、负责客户机与服务器之间的连接和通信&#xff0c;以及客户机与应用层之间的高效率通信机制。 2、提供应用的负载均衡和高可用性、安全机制与管…