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

news2024/11/30 2:43:40

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

以下是完整代码

<template>
  <div>
    <canvas ref="canvas" width="2000" height="300"></canvas

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

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

相关文章

SAP 获取GOS附件清单及URL数据方法

很久没有更新了&#xff0c;断更了快两个月了&#xff0c;最近准备软考考试&#xff0c;刚考完不知道这次能不能通过 回归正题 SAP中很多业务中都是可以上传附件或者是上传URL的路径的&#xff0c;上传附件长时间会占用SAP的空间&#xff0c;使用GOS大多数都是采用上传URL的方式…

【好书推荐】AI时代架构师修炼之道:ChatGPT让架构师插上翅膀

目录 前言 ChatGPT对架构师工作的帮助 快速理解和分析需求 提供代码建议和解决方案 辅助系统设计和优化 提高团队协作效率 如何使用ChatGPT提高架构师工作效率 了解用户需求和分析问题 编码实践和问题解决 系统设计和优化建议 团队协作和沟通效率提升 知识管理和文…

SOME/IP 协议介绍(一)

1. 引言和功能概述 本文档规定了可扩展面向服务基于IP的中间件&#xff08;SOME/IP&#xff09;——一种用于汽车/嵌入式RPC机制和底层序列化/传输格式的示例&#xff0c;作为由RTE调用的序列化器。 唯一有效的缩写是SOME/IP。其他缩写&#xff08;例如Some/IP&#xff09;是…

echarts有4个y轴,点击图例依次按顺序显示和隐藏

代码&#xff1a; <template><div><el-row class"actually" style"padding-top:10px;height: 420px;"><div style"font-size: 14px; font-weight: bold; margin: 0 10px 0 5px; display: inline-block">Cloud Usage<…

构建生成式AI应用:关键因素是什么?

原创 | 文 BFT机器人 生成式AI是一种基于机器学习和深度学习的技术&#xff0c;通过训练模型来生成新的内容&#xff0c;它可以通过学习现有的数据&#xff0c;理解其规律和特征&#xff0c;并生成与之类似的新内容&#xff0c;生成式AI在多个领域具有广泛的应用潜力。然而&am…

vue3+element Plus实现弹框的拖拽、可点击底层页面功能

1、template部分 <el-dialog:modal"false"v-model"dialogVisible"title""width"30%"draggable:close-on-click-modal"false"class"message-dialog"> </el-dialog> 必须加的属性 modal:是否去掉遮罩层…

【踩坑及思考】浏览器存储 cookie 最大值超过 4kb,或 http 头 cookie 超过限制值

背景 本地生产环境&#xff1a;超过最大值 cookie token 不存储&#xff1b;客户生产环境&#xff1a;打开系统空白&#xff0c;且控制台报 http 400 错误&#xff1b; 出现了两种现象 现象一&#xff1a;浏览器对大于 4kb 的 cookie 值不存储 导致用户名密码登录&#xff…

kill-port,跨平台解决端口占用问题

在日常开发中&#xff0c;端口占用问题一直是令人头疼的难题。为了更高效地管理端口资源&#xff0c;开发者们经常需要一种快速而可靠的解决方案。在这方面&#xff0c;kill-port 的出现为我们提供了一种强大而便捷的工具。本篇博客将深入介绍 kill-port 解决端口占用问题的优势…

Marp: 将 Markdown 变为 PPT 式样的 VScode 插件

样例代码&#xff1a; --- marp: true size: 16:9 theme: default header: footer: --- <!-- _footer: Jia ming<br>Gansu University of Political Science and Law --> <!-- _backgroundColor: lightskyblue --> ## <!-- fit --> 笔记检验概述>…

Django音乐电台推荐系统 毕业设计-附源码 00750

摘要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0c;应用软件的工作规…

c++的vector按值删除元素

代码 #include<iostream> #include<vector> using namespace std;void testDelete(vector<int>& vec, const bool delete45, const bool delete_less7) {if (delete45 true) {vec.erase(std::remove(vec.begin(), vec.end(), 45), vec.end());}if (del…

python加上ffmpeg实现音频分割

前言: 这是一个系列的文章,主要是使用python加上ffmpeg来对音视频文件进行处理,包括音频播放、音频格式转换、音频文件分割、视频播放等。 系列文章链接: 链接1: python使用ffmpeg来制作音频格式转换工具(优化版) 链接2:<Python>PyQt5+ffmpeg,简单视频播放器的编写(…

Springboot配置knife4j类(knife4j的使用)

1.引言 1.1 Swagger介绍 前后端分离开发模式中&#xff0c;API文档是最好的沟通方式。Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。具有以下几个特点&#xff1a; 及时性 (接口变更后&#xff0c;能够及时准确地通知相…

揭秘!AI加持双十一电商盛宴,带你解锁更多营销新玩法

从2009年到2023年&#xff0c;每年年终的双11大促都是如期而至&#xff0c;而且几乎每一次双11都能给电商行业带来创新和改变。今年是中国电商行业的第15个双11&#xff0c;也是人工智能&#xff08;AI&#xff09;在电商领域大规模应用的第一个双11。在这15年的发展历程中&…

RoboFab:世界第一家人形机器人生产工厂,承诺每年将生产1万台高科技机器人

原创 | 文 BFT机器人 脑洞大开地想象一下&#xff1a;有一家能够制造像人类一样行走、奔跑和工作的人型机器人的工厂。这听起来像是科幻电影&#xff0c;但实际上它已经出现在现实中。 不久之前&#xff0c;初创企业Agility Robotics向大众宣布将在美国俄勒冈州开设一座占地约…

Vue 官网使用与环境搭建

vue官网网址&#xff1a;https://cn.vuejs.org/vue脚手架文档网址&#xff1a;https://cli.vuejs.org/zh/ vue团队为了使得vue更加好的使用&#xff0c;维护了一些文档。 API是vue的字典&#xff0c;在编写vue的时候&#xff0c;遇到了一些不会的方法那么就去找API&#xff0c…

【linux进程控制(一)】进程终止--如何干掉一个进程?

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; 进程终止 1. 前言2. 文章整体…

uinapp微信小程序隐私政策授权

&#x1f680; 隐私弹窗效果图&#xff1a; 1、启用隐私相关功能在manifest.json文件中配置 usePrivacyCheck: true "mp-weixin" : {"__usePrivacyCheck__" : true, },2、创建组件 <template><view><!-- 隐私政策弹窗 --><uni-popu…

从瀑布模式到水母模式:ChatGPT引领软件研发的革新之路

ChatGPT引领软件研发的革新之路 概述操作建议本书优势 内容简介作者简介专家推荐读者对象目录直播预告写在末尾&#xff1a; 主页传送门&#xff1a;&#x1f4c0; 传送 概述 计算机技术的发展和互联网的普及&#xff0c;使信息处理和传输变得更加高效&#xff0c;极大地改变了…

CI523电动车NFC一键启动

Ci523是一颗工作在13.56MHz频率下的非接触式读写芯片&#xff0c;支持读A卡&#xff08;CI523支持读A/B卡&#xff09;&#xff0c;可做智能门锁、电动车NFC一键启动、玩具NFC开锁等应用。为部分要求低成本&#xff0c;PCB小体积的产品提供了可靠的选择。