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

news2025/2/25 18:37:15

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

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

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

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

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

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

完整代码如下:

demo.vue

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

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

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

相关文章

sql server 查询某个字段是否有值 返回bool类型

sql server 查询某个字段是否有值 返回bool类型&#xff0c;true 或 false SELECT ColumnCode,CONVERT(BIT,CASE WHEN LEN(ColumnCode) > 0 THEN 1 ELSE 0 END) AS HasValue FROM dbo.TF_LessonCatalog

Java(一)安装并使用 java(Windows)

安装并使用java 前言一、初识Java1.Java的安装1.1下载JDK1.2JDK安装与使用1.2.1安装1.2.2 IDEA&#xff08;编译器&#xff09;使用 2.Java运行编程逻辑&#xff08;重要后面要用&#xff09;总结 前言 学习很重要&#xff0c;复习也很重要&#xff0c;对于编程语言的复习更为…

初试小程序轮播组件

文章目录 一、轮播组件&#xff08;一&#xff09;swiper组件1、功能描述2、属性说明 &#xff08;二&#xff09;swiper-item组件1、功能描述2、属性说明 二、案例演示&#xff08;一&#xff09;运行效果&#xff08;二&#xff09;实现步骤1、创建小程序项目2、准备图片素材…

Azure + React + ASP.NET Core 项目笔记一:项目环境搭建(二)

有意义的标题 pnpm 安装umi4 脚手架搭建打包语句变更Visual Studio调试Azure 设置变更发布 pnpm 安装 参考官网&#xff0c;或者直接使用npm安装 npm install -g pnpmumi4 脚手架搭建 我这里用的umi4&#xff0c;官网已附上 这里需要把clientapp清空&#xff0c;之后 cd Cl…

构建普适通用的企业网络安全体系框架

在当今数字化时代&#xff0c;网络安全已成为企业保护信息资产和业务运行的重要任务。恶意攻击、数据泄露、网络病毒等威胁不断演进&#xff0c;给企业和个人带来了巨大风险。为了应对这一挑战&#xff0c;许多企业已经采取了一系列网络安全措施&#xff0c;如制定了网络安全政…

Nacos:Spring Cloud Alibaba服务注册与配置中心

Nacos 英文全称为 Dynamic Naming and Configuration Service&#xff0c;是一个由阿里巴巴团队使用 Java 语言开发的开源项目。 Nacos 是一个更易于帮助构建云原生应用的动态服务发现、配置和服务管理平台&#xff08;参考自 Nacos 官网&#xff09;。 Nacos 的命名是由 3 部…

系统架构设计师(第二版)学习笔记----嵌入式系统及软件

【原文链接】系统架构设计师&#xff08;第二版&#xff09;学习笔记----嵌入式系统及软件 文章目录 一、嵌入式系统1.1 嵌入式系统的组成1.2 嵌入式系统的特点1.3 嵌入式系统的分类 二、嵌入式软件2.1 嵌入式系统软件分层2.2 嵌入式软件的主要特点 三、安全攸关软件的安全性设…

ubuntu20.04 Supervisor 开机自启动脚本一文配置

前言: 最近发现一种非常好的开机启动服务方式,不光可以开机自启动,而且还可以进行开机节点的进程守护,这样大大确保了线程的稳定情况,这种服务甚至可以守护开机的进程,所以比之前设置 rc.local 开机自启动脚本一文配置节点好出很多,它甚至可以使用网页登录监管我开机自启…

RabbitMQ: 死信队列

一、在客户端创建方式 1.创建死信交换机 2.创建类生产者队列 3.创建死信队列 其实就是一个普通的队列&#xff0c;绑定号私信交换机&#xff0c;不给ttl&#xff0c;给上匹配的路由&#xff0c;等待交换机发送消息。 二、springboot实现创建类生产者队列 1.在消费者里的…

OpenText EnCase Endpoint Security 识别潜在的网络安全威胁并快速消灭威胁

如今&#xff0c;敏感数据丢失和 IT 系统中断是各类组织面临的最大危机。网络攻击频率不断攀升、修复成本日益增加以及响应时间延长都加剧了数据丢失的隐患。 OpenText EnCase Endpoint Security 的高效体现在能够加速检测恶意活动&#xff0c;并在其导致不可挽回的损失或丢失敏…

SpringSecurity OAuth2 配置 token有效时长

1.这种方式配置之后,并没有生效 package com.enterprise.auth.config;import com.enterprise.auth.handler.OAuthServerWebResponseExceptionTranslator; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Bea…

2023国赛数学建模B题思路代码 - 多波束测线问题

# 1 赛题 B 题 多波束测线问题 单波束测深是利用声波在水中的传播特性来测量水体深度的技术。声波在均匀介质中作匀 速直线传播&#xff0c; 在不同界面上产生反射&#xff0c; 利用这一原理&#xff0c;从测量船换能器垂直向海底发射声波信 号&#xff0c;并记录从声波发射到…

java文件命令行报错: 找不到或无法加载主类XXX报错及解决

前言 之前遇到过几次&#xff0c;后面稀里糊涂的解决了。今天详细记录一下&#xff0c;可能不全或有些错误&#xff0c;还请各位指正。 你要启动一个类的话首先要有类。 在这里&#xff0c;类有两种&#xff0c; 一个是带包名&#xff08;package&#xff09;的还有一个是没包…

lvs负载均衡、

四&#xff1a;LVS集群部署 lvs给nginx做负载均衡项目 218lvs yum -y install ipvsadm 设置VIP 定义策略 ipvsadm -C //清空现有规则 -A增加虚拟服务器记录 -D删除虚拟服务器记录 -L查看 150web-111 配置好网站服务器&#xff0c;测试所有RS [nginx-stable] namengin…

网络原理(二)TCP的可靠传输

网络原理&#xff08;一&#xff09;目录 网络原理应用层传输层先说UDP&#xff08;不可靠传输&#xff09;重点说明&#xff34;&#xff23;&#xff30;&#xff08;可靠传输&#xff09;一、确认应答二、超时重传三、链接管理建立连接断开链接 四、滑动窗口五、流量控制&am…

性能指标都不了解,如何做性能测试?

1、性能指标在性能测试的作用&#xff1f; 性能指标在性能测试中起着非常重要的作用&#xff0c;它们帮助我们评估和了解系统的性能表现。下面用通俗易懂的话来解释性能指标的作用和意义&#xff1a; 帮助我们了解系统的处理能力&#xff1a;性能指标可以告诉我们系统在给定负…

目标检测评估指标mAP:从Precision,Recall,PR曲线到AP

1. TP, FP, FN, TN True Positive 满足以下三个条件被看做是TP 1. 置信度大于阈值&#xff08;类别有阈值&#xff0c;IoU判断这个bouding box是否合适也有阈值&#xff09; 2. 预测类型与标签类型相匹配&#xff08;类别预测对了&#xff09; 3. 预测的Bouding Box和Ground …

[react基础]关于v6版本route的变化,以及常见应用模式

该说不说,在做这些之前,你要记得一件事 route不是react或者vue等原本就有的组件!需要你手动下载!然后导入! 原本的框架只是最终挂载到一个html界面上!!! 别再问我为啥你扒下来的代码为啥不好使了! 讨厌 > _< 下载指令去看我另一篇推文 今天复盘了一下自己的实训…

pyCharm远程DEBUG

第一步&#xff0c;添加一个远程机器的解释器 ssh 远程机器解释器添加&#xff0c; 我本地ssh有配置目标机器。 如果没配置&#xff0c;那就选着new server configuration 新增一个。 interpreter 指定远程机器python&#xff0c; &#xff08;机器上有多个版本python里尤其要…

【LeetCode-中等题】22. 括号生成

文章目录 题目方法一&#xff1a;递归&#xff1a;方法二&#xff1a;递归回溯 题目 方法一&#xff1a;递归&#xff1a; 递归入口 空子结果集&#xff0c;左括号数目&#xff08;初始为0&#xff09;&#xff0c;右括号数目&#xff08;初始为0&#xff09; 递归出口 若左括…