当前位置: 首页 > news >正文

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的写法,请移步这里

相关文章:

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

本来写这个特效 我打算用css实现的&#xff0c;结果是一波三折&#xff0c;我太难了&#xff0c;最终没能用css实现&#xff0c;转战了canvas来实现。来吧先看效果图 当然这个图的波浪高度、频率、位置、速度都是可调的&#xff0c;请根据自己的需求调整&#xff0c;如果你讲波…...

峰回网关数采PLC

1.网络配置 例如&#xff1a;plc地址是192.168.1.56 1.访问网关 峰回网关默认网关地址 192.168.3.18&#xff0c;或者&#xff08;10.10.253.354&#xff09;&#xff0c;本案例按照3.18讲解。 1和1相连&#xff0c;0和电脑相连 本地电脑修改ip为192.168.3.3&#xff08;和3…...

Vue+element el-date-picker 时间日期选择器设置默认值,选择框不显示问题(已解决)

时间选择器默认值的问题 显示的时候如果用下面的方式赋值将不会显示出来&#xff1a; this.deviceFormData.time[0] that.$filterArray.formatDatehh(start);this.deviceFormData.time[1] that.$filterArray.formatDateEnd(end);实际上是有数据的&#xff0c;但是不会显示出…...

数据挖掘题目:根据规则模板和信息表找出R中的所有强关联规则,基于信息增益、利用判定树进行归纳分类,计算信息熵的代码

一、&#xff08;30分&#xff09;设最小支持度阈值为0.2500, 最小置信度为0.6500。对于下面的规则模板和信息表找出R中的所有强关联规则&#xff1a; S∈R&#xff0c;P&#xff08;S&#xff0c;x &#xff09;∧ Q&#xff08;S&#xff0c;y &#xff09;> Gpa&#xf…...

Reshape.XL 1.2 for Excel插件 Crack

特征 插件 Reshape.XL 包括 130 个基本可组合功能。使用它们&#xff0c;您可以快速轻松地进行非常复杂的数据转换和处理。它们的架构和基本定义受到 SQL 和 R 语言的强烈启发。 到目前为止&#xff0c;类似的功能只能通过脚本语言供程序员使用。借助 Reshape.XL 插件&#xf…...

开发知识点-PHP从小白到拍簧片

从小白到拍簧片 位异或运算&#xff08;^ &#xff09;引用符号(&)strlen() 函数base64_encode预定义 $_POST 变量session_start($array);操作符php 命令set_time_limit(7200)isset()PHP 命名空间(namespace)new 实例化类extends 继承 一个类使用另一个类方法error_reporti…...

飞书开发学习笔记(二)-云文档简单开发练习

飞书开发学习笔记(二)-云文档简单开发练习 一.云文档飞书开发环境API 首先还是进入开放平台 飞书开放平台&#xff1a;https://open.feishu.cn/app?langzh-CN 云文档相关API都在“云文档”目录中&#xff0c;之下又有"云空间",“文档”&#xff0c;“电子表格”&a…...

设计模式——命令模式(Command Pattern)+ Spring相关源码

文章目录 一、命令模式定义二、例子2.1 菜鸟教程例子2.1.1 定义命令类接口2.1.2 定义命令执行者2.1.3 被处理对象Stock。2.1.4 封装处理Stock的命令 2.2 JDK源码——Runnable2.2.1 命令接口2.2.2 命令处理者2.2.3 命令实现类 2.3 SpringMVC——Controller2.3.1 请求对象 handle…...

[开源]企业级在线办公系统,基于实时音视频完成在线视频会议功能

一、开源项目简介 企业级在线办公系统 本项目使用了SpringBootMybatisSpringMVC框架&#xff0c;技术功能点应用了WebSocket、Redis、Activiti7工作流引擎&#xff0c; 基于TRTC腾讯实时音视频完成在线视频会议功能。 二、开源协议 使用GPL-3.0开源协议 三、界面展示 部分…...

Scala语言用Selenium库写一个爬虫模版

首先&#xff0c;我将使用Scala编写一个使用Selenium库下载yuanfudao内容的下载器程序。 然后我们需要在项目的build.sbt文件中添加selenium的依赖项。以下是添加Selenium依赖项的代码&#xff1a; libraryDependencies "org.openqa.selenium" % "selenium-ja…...

ZZ038 物联网应用与服务赛题第I套

2023年全国职业院校技能大赛 中职组 物联网应用与服务 任 务 书 &#xff08;I卷&#xff09; 赛位号&#xff1a;______________ 竞赛须知 一、注意事项 1.检查硬件设备、电脑设备是否正常。检查竞赛所需的各项设备、软件和竞赛材料等; 2.竞赛任务中所使用的各类软件工…...

ClickHouse 学习之基础入门(一)

第 1 章 ClickHouse 入 门 ClickHouse 是俄罗斯的 Yandex 于 2016 年开源的列式存储数据库&#xff08;DBMS&#xff09;&#xff0c;使用 C 语言编写&#xff0c;主要用于在线分析处理查询&#xff08;OLAP&#xff09;&#xff0c;能够使用 SQL 查询实时生成分析数据报告。 …...

HttpClient基本使用

十二、HttpClient 12.1 介绍 HttpClient是Apache Jakarta Common 下的子项目&#xff0c;可以用来提供高效的、最新的、功能丰富的支持HTTP协议的客户端编程工具包&#xff0c;并且它支持HTTP协议最新的版本和建议。 HttpClient作用&#xff1a; 发送HTTP请求接收响应数据 …...

力扣:150. 逆波兰表达式求值(Python3)

题目&#xff1a; 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意&#xff1a; 有效的算符为 、-、* 和 / 。每个操作数&#xff08;运算对象&#xff09;都可以是一个整数或者另一…...

Tomcat运行日志乱码问题/项目用tomcat启动时窗口日志乱码

文章目录 一、问题描述&#xff1a;二、产生原因三、解决方法 一、问题描述&#xff1a; 项目在idea中运行时日志是正常的&#xff0c;用Tomcat启动时发现一大堆看不懂的文字&#xff0c;如 二、产生原因 产生乱码的根本原因就是编码和解码不一致&#xff0c;举个例子就是翻…...

Leetcode—199.二叉树的右视图【中等】

2023每日刷题&#xff08;十九&#xff09; Leetcode—199.二叉树的右视图 深度优先遍历实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(…...

微信小程序如何跳转到外部小程序

要在微信小程序中跳转到外部小程序&#xff0c;您可以使用微信小程序提供的 wx.navigateToMiniProgram 方法。以下是实现步骤&#xff1a; 在需要跳转的页面或组件中&#xff0c;编写触发跳转的逻辑&#xff0c;例如点击按钮&#xff1a; 替换 外部小程序的AppID 和 外部小程序…...

ElasticSearch集群环境搭建

1、准备三台服务器 这里准备三台服务器如下: IP地址主机名节点名192.168.225.65linux1node-1192.168.225.66linux2node-2192.168.225.67linux3node-3 2、准备elasticsearch安装环境 (1)编辑/etc/hosts&#xff08;三台服务器都执行&#xff09; vim /etc/hosts 添加如下内…...

[架构之路-250/创业之路-81]:目标系统 - 纵向分层 - 企业信息化的呈现形态:常见企业信息化软件系统 - 企业内的数据与数据库

目录 一、数据概述 1.1 数据 1.2 企业信息系统的数据 1.3 大数据 1.4 数据与程序的分离思想 1.5 数据与程序的分离做法 1.6 数据库的基本概念 1.7 企业数据来源 1.8 企业数据架构 二、常见的数据库类型 2.1 数据库分类 2.1 数据库类型 2.2 常见的数据库类型、应用…...

delaunay和voronoi图 人脸三角剖分

先获取人脸68个特征点坐标&#xff0c;其中使用了官方的预训练模型shape_predictor_68_face_landmarks.dat&#xff1a; import dlib import cv2predictor_path "shape_predictor_68_face_landmarks.dat" png_path "face.jpg"txt_path "points.tx…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...