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

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

news 2026/4/2 12:28:22

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

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

最终效果如下图：
在这里插入图片描述
（以上没用任何图片，都是代码绘制的）

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

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

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

完整代码如下：

demo.vue

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

相关文章：

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

项目需求：需要绘制渐变色三角形金字塔，并用折线添加标识 （其实所有直接用图片放上去也行，但是ui没切图，我也懒得找她要，正好也没啥事，直接自己用代码绘制算了，总结一句就是闲的） 最终效果如下图： （以上没用任何图片，都是代码绘制的） 在网上找了，有用canvas绘…...

编程日记 2023/9/9 5:14:00

企业电子招标采购系统源码Spring Boot + Mybatis + Redis + Layui + 前后端分离 构建企业电子招采平台之立项流程图

功能模块&#xff1a; 待办消息&#xff0c;招标公告&#xff0c;中标公告&#xff0c;信息发布 描述&#xff1a; 全过程数字化采购管理&#xff0c;打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&#xff0c;为外部供…...

编程日记 2023/9/9 5:12:58

Debain JDK8 安装

Debain JDK8 安装 首先请安装依赖&#xff1a; sudo apt-get update && sudo apt-get install -y wget apt-transport-https然后信任 GPG 公钥&#xff1a; wget -O - https://packages.adoptium.net/artifactory/api/gpg/key/public | sudo tee /etc/apt/keyrings/…...

编程日记 2023/9/9 5:11:58

Python序列操作指南：列表、字符串和元组的基本用法和操作

文章目录 序列列表创建列表访问元素修改元素添加和删除元素 range()字符串创建字符串访问字符字符串切片修改字符串 元组创建元组访问元素获取元素数量元组的特点&#xff1a; 可变对象改变对象的值改变变量的指向比较运算符总结 python精品专栏推荐python基础知识&#xff08;…...

编程日记 2023/9/9 5:10:56

【已更新代码图表】2023数学建模国赛E题python代码--黄河水沙监测数据分析

E 题 黄河水沙监测数据分析 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变 化和人民生活的影响&#xff0c;以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾 等方面都具有重要的理论指导意义。 附件 1 给出了位于小浪底水…...

编程日记 2023/9/9 5:09:55

【前端】CSS-Grid网格布局

目录 一、grid布局是什么二、grid布局的属性三、容器属性1、display①、语句②、属性值 2、grid-template-columns属性、grid-template-rows属性①、定义②、属性值1&#xff09;、固定的列宽和行高2&#xff09;、repeat()函数3&#xff09;、auto-fill关键字4&#xff09;、f…...

编程日记 2023/9/9 5:08:54

计算机竞赛 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…...

编程日记 2023/9/9 5:07:53

2023-9-8 求组合数(二)

题目链接&#xff1a;求组合数 II #include <iostream> #include <algorithm>using namespace std;typedef long long LL; const int mod 1e9 7; const int N 100010;// 阶乘&#xff0c;阶乘的逆 int fact[N], infact[N];LL qmi(int a, int k, int p) {int res…...

编程日记 2023/9/9 5:06:53

k8s service的一些特性

文章目录 Service分发负载的策略同一端口通过不同协议暴露Headless Service的负载分发策略 Service分发负载的策略 大家都知道&#xff0c;一个service可以对应多个pod&#xff0c;那么一定要有一些方法来把service接收到的请求&#xff08;负载&#xff09;转发到pod上。 一般…...

编程日记 2023/9/9 5:05:52

C++中std::enable_if和SFINAE介绍

作为一个标准的C++模板类，我们先看下enable_if的定义： // STRUCT TEMPLATE enable_if template <bool _Test, class _Ty = void> struct enable_if {}; // no member "type" when !_Testtemplate <class _Ty> struct enable_if<true, _Ty> { //…...

编程日记 2023/9/9 5:04:51

华为OD机考算法题：数字加减游戏

目录 题目部分 解读与分析 代码实现 题目部分 题目数字加减游戏难度难题目说明小明在玩一个数字加减游戏&#xff0c;只使用加法或者减法&#xff0c;将一个数字 s 变成数字 t 。 每个回合&#xff0c;小明可以用当前的数字加上或减去一个数字。 现在有两种数字可以用来加减…...

编程日记 2023/9/9 5:03:50

WPF命令

在设计良好的Windows应用程序中&#xff0c;应用程序逻辑不应位于事件处理程序中&#xff0c;而应在更高层的方法中编写代码。其中的每个方法都代表单独的应用程序任务。每个任务可能依赖其他库。 使用这种设计最明显的方式是在需要的地方添加事件处理程序&#xff0c;并使用各…...

编程日记 2023/9/9 5:02:49

Unity中Shader的屏幕抓取 GrabPass

文章目录 前言一、抓取1、抓取指令2、在使用抓取的屏幕前&#xff0c;需要像使用属性一样定义一下,_GrabTexture这个名字是Unity定义好的 前言 Unity中Shader的屏幕抓取 GrabPass 一、抓取 1、抓取指令 屏幕的抓取需要使用一个Pass GrabPass{} GrabPass{“NAME”} 2、在使用…...

编程日记 2023/9/9 5:01:48

手撕 队列

队列的基本概念 只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出 入队列&#xff1a;进行插入操作的一端称为队尾 出队列&#xff1a;进行删除操作的一端称为队头 队列用链表实现 队列的实现 队列的定义 队列…...

编程日记 2023/9/9 5:00:47

【autodl/linux配环境心得：conda/本地配cuda，cudnn及pytorch心得】-未完成

linux配环境心得&#xff1a;conda/本地配cuda&#xff0c;cudnn及pytorch心得 我们服务器遇到的大多数找不到包的问题一&#xff0c;服务器安装cuda和cudnn使用conda在线安装cuda和cudnn使用conda进行本地安装检查conda安装的cuda和cudnn本地直接安装cuda和cudnn方法一&#x…...

编程日记 2023/9/9 4:59:46

macOS Ventura 13.5.2（22G91）发布，附黑/白苹果镜像下载地址

系统介绍&#xff08;下载请百度搜索&#xff1a;黑果魏叔&#xff09; 黑果魏叔 9 月 8 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 13.5.2 更新&#xff08;内部版本号&#xff1a;22G91&#xff09;&#xff0c;本次更新距离上次发布隔了 21 天。 本次更新查…...

编程日记 2023/9/9 4:58:46

vue 子组件向父组件传递参数 子传父

子组件中写&#xff1a; this.$emit(RowCount,res.data.RowCount); 父组件中写&#xff1a; getMFGLRowCount(val){ //父组件中的方法: 接收子组件传过来的参数值赋值给父组件的变量 //this.totalCount val; alert("这…...

编程日记 2023/9/9 4:57:44

自然语言处理学习笔记（八）———— 准确率

目录 1.准确率定义 2.混淆矩阵与TP/FN/FP/TN 3. 精确率 4.召回率 5.F1值 6.中文分词的P、R、F1计算 7.实现 1.准确率定义 准确率是用来衡量一个系统的准确程度的值&#xff0c;可以理解为一系列评测指标。当预测与答案的数量相等时&#xff0c;准确率指的是系统做出正确判…...

编程日记 2023/9/9 4:56:43

Matlab 如何选择窗函数和 FFT 的长度

Matlab 如何选择窗函数和 FFT 的长度 1、常用的四种窗函数 对于实际信号序列&#xff0c;如何选取窗函数呢&#xff1f;一般来说&#xff0c;选择第一旁瓣衰减大&#xff0c;旁瓣峰值衰减快的窗函数有利于緩解截断过程中产生的頻泄漏问题。但具有这两个特性的窗函数&#xff0…...

编程日记 2023/9/9 4:55:42

node.js下载安装环境配置以及快速使用

目录 一、下载 二、安装 三、测试安装是否成功 四、配置环境 五、测试配置环境是否成功 六、安装淘宝镜像 七、快速上手 1、建立一个自己的工作目录 2、下载工作代码 八、各种配置文件匹配问题入坑 九、总结 一、下载 Node.js 中文网 想选择其他版本或者其他系统使用…...

编程日记 2023/9/9 4:54:41

Pixiv -直连-手机电脑全平台可用，聚合多个资源一站搞定

功能特点 全平台支持&#xff1a;兼容 Android、iOS、Windows 和 macOS 系统&#xff0c;覆盖主流设备。直连访问&#xff1a;内置优化网络链路&#xff0c;绕过访问限制&#xff0c;无需额外配置或登录即可加载内容。无广告体验&#xff1a;去除官方客户端的广告干扰&#xf…...

编程新知 2026/4/2 11:51:13

django做动态【个人主页】

一、项目概述与目标动态个人主页的定义与核心功能&#xff08;博客展示、项目集、联系表单等&#xff09;Django框架的优势&#xff08;MTV模式、ORM、Admin后台等&#xff09;技术栈预览&#xff08;Python 3.x, Django 3.x, Bootstrap 5, SQLite/PostgreSQL&#xff09;二、环…...

编程新知 2026/4/2 11:38:52

从防御者视角复盘：当你的Win11突然断网，如何快速排查是不是遭遇了ARP欺骗？

从防御者视角复盘&#xff1a;当你的Win11突然断网&#xff0c;如何快速排查是不是遭遇了ARP欺骗&#xff1f; 办公室里突然有人喊"网络断了"&#xff0c;你的Win11电脑明明显示Wi-Fi已连接&#xff0c;却打不开任何网页。这种情况可能不只是简单的路由器故障——ARP…...

编程新知 2026/4/2 11:34:44

如何用MouseClick鼠标连点器实现高效自动化点击：从游戏到办公的全场景指南

如何用MouseClick鼠标连点器实现高效自动化点击&#xff1a;从游戏到办公的全场景指南 【免费下载链接】MouseClick &#x1f5b1;️ MouseClick &#x1f5b1;️ 是一款功能强大的鼠标连点器和管理工具&#xff0c;采用 QT Widget 开发 &#xff0c;具备跨平台兼容性 。软件界…...

编程新知 2026/4/2 11:30:43

GitHub OCaml项目：C++后端突破与代码编译新变革

【导语&#xff1a;GitHub的OCaml项目迎来重要升级&#xff0c;开发者stedolan提交补丁为ocamlc添加新的C后端&#xff0c;改进运行时和FFI使用的非增量C代码&#xff0c;这一突破将为代码编译带来新的可能。】OCaml新添C后端&#xff1a;代码编译新途径开发者stedolan希望将2次…...

编程新知 2026/4/2 11:28:43

洪城寻缘角

洪城寻缘角 南昌人的免费寻缘平台 不必再奔波相亲角&#xff0c;不必被收费套路困扰 洪城寻缘角&#xff0c;全功能永久免费 无需注册即可登记&#xff0c;一键发布个人资料 支持多条件精准筛选&#xff0c;快速匹配同频有缘人 覆盖南昌全城单身&#xff0c;真实、高效、安心…...

编程新知 2026/4/2 11:28:42

2026年03月总结及随笔之又双叒叕漏更

1. 回头看日更坚持了1186天。读《人工智能全球格局&#xff1a;未来趋势与中国位势》更新完成读《2025世界前沿技术发展报告》开更并持续更新中2023年至2025年12月底累计码字3054280字&#xff0c;累计日均码字2786字。2023年至2026年03月底累计码字3334223字&#xff0c;累计日…...

编程新知 2026/4/2 11:16:31

找不到msvcr120.dll解决方法：2026年有效的一键修复与手动安装步骤

正玩着游戏或做着设计图&#xff0c;屏幕突然弹出“找不到msvcr120.dll”的提示&#xff0c;相信很多Windows用户都遇到过这种令人抓狂的时刻。这个错误意味着你的电脑缺少了某个软件或游戏运行所必需的“零件”。别担心&#xff0c;这个零件就是Microsoft Visual C 2013运行库…...

编程新知 2026/4/2 9:10:45

保姆级教程：用Docker快速部署FreeSWITCH的ASR服务（含FunASR、sherpa-ncnn）

基于Docker的FreeSWITCH语音识别服务实战指南 语音识别&#xff08;ASR&#xff09;技术正在重塑通信系统的交互方式。对于FreeSWITCH开发者而言&#xff0c;将高效ASR服务集成到电话系统中&#xff0c;可以解锁语音指令控制、实时字幕生成、智能客服等创新应用场景。Docker技术…...

编程新知 2026/4/2 9:06:43

OpenClaw 企业级实战：Java 微服务集成 AI 智能体，自动处理业务流

文章目录当你的微服务开始"自己思考"OpenClaw 到底是个啥&#xff1f;别被概念吓住架构设计&#xff1a;让 Java 微服务和 AI 智能体"合伙创业"整体架构草图为什么非得用 Java&#xff1f;Python 不香吗&#xff1f;实战准备&#xff1a;Spring AI 与 Open…...

编程新知 2026/4/2 8:30:05