canvas绘制渐变色三角形金字塔

项目需求:需要绘制渐变色三角形金字塔,并用折线添加标识

(其实所有直接用图片放上去也行,但是ui没切图,我也懒得找她要,正好也没啥事,直接自己用代码绘制算了,总结一句就是闲的)

最终效果如下图:
在这里插入图片描述
(以上没用任何图片,都是代码绘制的)

在网上找了,有用canvas绘制渐变色三角形,然后再稍微改改变成断层金字塔

右侧的点和折线图使用svg绘制

其他文字和数字通过绝对定位放上去

完整代码如下:

demo.vue

<template><div class="box"><div class=

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

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

相关文章

go-zero jwt 鉴权快速实战

前面我们分享了 go-zero 的快速实战以及日志组件的剖析&#xff0c;本次我们来实战使用 go-zero jwt 鉴权 本次文章主要是分享关于 go-zero 中 jwt 的使用方式&#xff0c;会以一个 demo 的方式来进行实战&#xff0c;对于使用 goctl 工具以及安装细节就不在赘述&#xff0c;有…

数字图像处理:亮度对比度-几何变换-噪声处理

文章目录 数字图像增强亮度与对比度转换几何变换图像裁剪尺寸变换图像旋转 噪声处理添加噪声处理噪声 数字图像增强 亮度与对比度转换 图像变换可分为以下两种&#xff1a; 点算子&#xff1a;基于像素变换&#xff0c;在这一类图像变换中&#xff0c;仅仅根据输入像素值计算…

字符串讲解

文章目录 字符串一.String概述二.创建String对象的两种方式三.Java的内存模型四.字符串的比较五.StringBuilder的基本操做六.StringJoiner概述七.字符串相关类的底层原理 字符串 一.String概述 1.String是Java定义好的一个类,定义在java.long包中,所以使用的时候不需要导包 …

Mybatis学习|Mybatis缓存:一级缓存、二级缓存

Mybatis缓存 MyBatis包含一个非常强大的查询缓存特性&#xff0c;它可以非常方便地定制和配置缓存。缓存可以极大的提升查询效率。 MyBatis系统中默认定义了两级缓存:一级缓存和二级缓存 默认情况下&#xff0c;只有一级缓存开启。(SqlSession级别的缓存&#xff0c;也称为本地…

centroen 23版本换界面了

旧版本 新版本 没有与操作系统一起打包的ISO文件了&#xff0c;要么先安装系统&#xff0c;再安装Centreon&#xff0c;要么用pve导入OVF文件

Visual Stadio使用技巧

C语言调试技巧 Debug 和 Release 的介绍 Debug&#xff1a;通常称为调试版本&#xff0c;它包含调试信息&#xff0c;并且不作任何优化&#xff0c;便于程序员调试&#xff08;可调试&#xff09;。 Release&#xff1a;通常称为发布版本&#xff0c;它往往时进行了各种优化&a…

java实现调用百度地图

这里使用的springbootthymeleaf实现&#xff0c;所以需要有springboot技术使用起来更方便 当然&#xff0c;只使用html加js也可以实现&#xff0c;下面直接开始 首先我们需要去百度地图注册一个AK&#xff08;百度地图开放平台 | 百度地图API SDK | 地图开发&#xff09; 找到左…

windows弹出交互式服务检测一键取消bat脚本

现象 脚本命令 新建一个bat文件&#xff0c;将下面的脚本拷贝进去&#xff0c;保存&#xff0c;双击即可 禁用服务&#xff1a;重启电脑的时候不会启动 停止服务&#xff1a;立即停止服务&#xff0c;马上生效的 sc config UI0Detect start disabled net stop UI0Detect

vscode 调试 ROS2

1、在下列目录同层级找到.vscode文件夹 . ├── build ├── install ├── log └── src 2、 安装ros插件 3、创建tasks.json文件&#xff0c;添加下列内容 //代替命令行进行编译 {"version": "2.0.0","tasks": [{"label": &…

CocosCreator3.8研究笔记(六)CocosCreator 脚本装饰器的理解

一、什么是装饰器&#xff1f; 装饰器是TypeScript脚本语言中的概念。 TypeScript的解释&#xff1a;在一些场景下&#xff0c;我们需要额外的特性来支持标注或修改类及其成员。装饰器&#xff08;Decorators&#xff09;为我们在类的声明及成员上通过元编程语法添加标注提供了…

Linux基础知识及常见指令

Linux简介及相关概念 什么是Linux&#xff1f; Linux是一个免费开源的操作系统内核&#xff0c;最初由Linus Torvalds于1991年创建。它是各种Linux发行版&#xff08;通常称为“发行版”&#xff09;的核心组件&#xff0c;这些发行版是完整的操作系统&#xff0c;包括Linux内…

AUTOSARCAN-Tp协议

目录 一.单帧、首帧、连续帧、流控帧 单帧传输 SF单帧&#xff1a; 多帧传输 FF&#xff08;首帧&#xff09;&#xff1a; CF&#xff08;连续帧&#xff09;&#xff1a; FC&#xff08;流控帧&#xff09;&#xff1a; 一.单帧、首帧、连续帧、流控帧 CAN诊断由发送端…

C中的基本函数

1函数是是什么 1.1维基百科中对函数的定义&#xff1a;子程序 在计算机科学中&#xff0c;子程序是一个大型程序中的某部分代码&#xff0c;由一个或多个语句块组成&#xff0c;他负责完成某项特定任务&#xff0c;而且相较于其他代码&#xff0c;具备相对的独立性。 一般会有输…

浅析安防视频监控平台EasyCVR视频融合平台接入大量设备后是如何维持负载均衡的

安防视频监控平台EasyCVR视频融合平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。视频汇聚融合管理平台EasyCVR既具备…

【C++】学习STL中的list

❤️前言 大家好&#xff01;&#xff0c;今天为大家带来的一篇博客是关于STL中的list&#xff0c;内容主要包括list的介绍使用、list的模拟实现。以及list与vector的对比。 正文 list的介绍和使用 首先&#xff0c;让我们看看list的文档介绍&#xff1a; list是可以在常数范…

LabVIEW检测润滑油中的水分和铁颗粒

LabVIEW检测润滑油中的水分和铁颗粒 润滑油广泛应用于现代机械设备&#xff0c;由于工作环境日益恶劣&#xff0c;润滑油经常被水分乳化&#xff0c;加速对机械设备的腐蚀。此外&#xff0c;润滑油还受到机械零件摩擦中产生的Fe颗粒的污染&#xff0c;削弱了其机械润滑效果。润…

微服务-gateway基本使用

文章目录 一、前言二、gateway网关1、什么是微服务网关&#xff1f;2、微服务架构下网关的重要性2.1、没有网关2.2、有网关 3、gateway的功能4、gateway实战4.1、依赖配置4.2、添加网关配置4.3、添加网关启动类4.4、查看项目是否启动成功4.5、验证路由配置是否正确 三、总结 一…

设备管理系统的优势是什么?设备管理系统对企业运营管理有什么帮助?

传统的设备报修维护方式存在一些问题&#xff0c;例如指派传递速度慢和故障信息不准确等。然而&#xff0c;使用设备管理系统就可以轻松地解决这些问题&#xff0c;并且报修全流程只需短短的30秒。设备管理系统具有许多优势&#xff0c;首先它支持多种渠道的报修&#xff0c;包…

视频集中存储/直播点播平台EasyDSS点播文件分类功能新升级

视频推拉流EasyDSS视频直播点播平台&#xff0c;集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体&#xff0c;可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务。 TSINGSEE青犀视频的EasyDSS平台具有点播文件分类展示方法&#xf…

MojoTween:使用「Burst、Jobs、Collections、Mathematics」优化实现的Unity顶级「Tween动画引擎」

MojoTween是一个令人惊叹的Tween动画引擎&#xff0c;针对C#和Unity进行了高度优化&#xff0c;使用了Burst、Jobs、Collections、Mathematics等新技术编码。 MojoTween提供了一套完整的解决方案&#xff0c;将Tween动画应用于Unity Objects的各个方面&#xff0c;并可以通过E…