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

Uniapp编写微信小程序，使用canvas进行绘图

news 来源：原创 2025/8/5 6:08:18

一、`canvas`文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

二、数据绘制（单位是像素）：

1、绘制文本：

文字的长度超过设置的最大宽度，文字会缩在一起

① 填充文本（实心）：

ctx.fillText("这里是文字", 开始绘制文本的点的 x 轴坐标, 开始绘制文本的点的 y 轴坐标[， 文字的最大宽度]);

② 边框文本（空心）：

ctx.strokeText("这里是文字", 开始绘制文本的点的 x 轴坐标, 开始绘制文本的点的 y 轴坐标[， 文字的最大宽度]);

③ 文本超过最大宽度想要换行：

/**
* ctx：canvas元素
* x：开始绘制文本的点的 x 轴坐标
* y：开始绘制文本的点的 y 轴坐标
* lineHeight： 文本的行高
* maxWidth：文字的最大宽度
* 返回值：下一行文字的起始位置y坐标
**/ 
function drawWrappedText(ctx, text, x, y, lineHeight, maxWidth) {// Split text into words using spaces, filtering out empty stringsconst words = text.split(/\s+/g).filter(word => word.length > 0);let line = '';const lines = [];for (const word of words) {// Check if adding the word (with space) exceeds maxWidthconst testLine = line ? line + ' ' + word : word;const metrics = ctx.measureText(testLine);if (metrics.width > maxWidth) {if (line === '') {// Word is too long; split itlet splitIndex = 1;while (splitIndex < word.length) {const part = word.substring(0, splitIndex);if (ctx.measureText(part).width > maxWidth) break;splitIndex++;}splitIndex = Math.max(1, splitIndex - 1); // Adjust to fitlines.push(word.substring(0, splitIndex));line = word.substring(splitIndex); // Remaining part} else {// Push current line and start new line with the wordlines.push(line);line = word;}} else {line = testLine; // Add word to current line}}if (line) lines.push(line); // Add the last line// Draw each line and calculate nextStartlines.forEach((line, index) => {ctx.fillText(line, x, y + index * lineHeight, maxWidth);});return y + lines.length * lineHeight; // Next starting Y position
}

④ 文本样式：

ctx.font="文字大小 粗细 颜色 字体名称..."

2、绘制矩形：

① 填充矩形（实心）：

ctx.fillStyle = '颜色'  // 这个是填充的颜色
ctx.fillRect(矩形左上角的起始点x, 矩形左上角的起始点y, 矩形的宽, 矩形的高); // 这个是填充矩形

② 边框矩形（空心）：

ctx.strokeRect(边框左上角的起始点x, 边框左上角的起始点y, 边框的宽, 边框的高);
ctx.strokeStyle = '颜色' // 这个是矩形线条边框的颜色

3、绘制路径：

① 新建一条路径：`ctx.beginPath()`

② 移动笔触设置起点：`ctx.moveTo(路径的起点x，路径的起点y);`

③ 绘制路径：

（1）直线：

ctx.lineTo(直线结束点x，直线结束点y);

只要线条轮廓：ctx.stroke()
需要填充：ctx.fill()

（2）闭合路径绘制（连接起点和终点）：

ctx.closePath()

（3）指定线条的宽度：

ctx.lineWidth = 数字

4、绘制图片：

图片尽量使用临时路径，即使用uni.canvasToTempFilePath()函数生成

① 微信小程序不允许使用`new Image()`：

使用 canvas.createImage()

② 绘制图片是一个异步过程，要使用`async\await`进行处理

三、简单的使用代码：

1、模版代码：

<canvas id="myCanvas" type="2d" :style="{ position: 'fixed', top: '-9999px', left: '-9999px', width: canvasWidth + 'px', height: canvasHeight + 'px' }"
></canvas>

2、`js`代码：

// 初始化canvas
async createCanvas(width, height) {return new Promise((resolve) => {const query = uni.createSelectorQuery().in(this);query.select('#myCanvas').fields({ node: true, size: true }).exec(res => {const canvas = res[0].node;// const dpr = uni.getSystemInfoSync().pixelRatio;// canvas.width = width * dpr;// canvas.height = height * dpr;canvas.width = widthcanvas.height = heightresolve(canvas);});});
},
// 点击某个按钮进行模版的绘制
async saveImg() {const that = this// 首先初始化canvasconst canvas = await that.createCanvas(图片的宽, 图片的高);const ctx = canvas.getContext('2d');// 拿到当前设备的像素比const dpr = uni.getSystemInfoSync().pixelRatio;// 绘制内容：await that.drawImage(canvas, ctx, 图片的临时路径, 221,58, 108, 108);
},
async drawImage(canvas,ctx, imagePath, x, y, width, height) {return new Promise((resolve) => {const img = canvas.createImage();img.src = imagePath;img.onload = () => {ctx.drawImage(img, x, y, width, height);resolve();};});
}

Uniapp编写微信小程序，使用canvas进行绘图

一、canvas文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial 二、数据绘制（单位是像素）： 1、绘制文本： 文字的长度超过设置的最大宽度，文字会缩在一起 ① 填充文本&#xf…...

编程日记 2025/8/5 6:08:18

Java高频基础面试题

Java高频基础面试题 Java基础 Java的特点是什么？ 面向对象平台无关性（“一次编写，到处运行”）支持多线程自动内存管理（垃圾回收）安全性丰富的类库 JDK、JRE和JVM的区别 JDK (Java Development Kit): Java…...

编程日记 2025/8/3 15:20:36

U9C-SQL-采购订单视图 SELECTpo.ID,CONVERT ( VARCHAR ( 10 ), po.CreatedOn, 23 ) AS 签订日期,org.Name AS 甲方,po.DocNo AS 单号,item.Code AS 料号,item.Name AS 品名,item.SPECS AS 规格,item.DescFlexField_PrivateDescSeg1 AS 图号,item.DescFlexField_PrivateDescSeg2…...

编程日记 2025/8/5 6:04:48

HTML字符串转换为React元素实现

HTML字符串安全转换为React元素的实现一、背景介绍介绍HTML字符串在Web开发中的常见场景。说明React中直接使用HTML字符串的局限性。提出将HTML字符串转换为React元素的需求。二、首先必备的两个npm库：html-react-parser和dompurify 导入： pnpm i…...

编程日记 2025/7/31 13:35:39

全局异常未能正确捕获到对应的异常

自定义Validation验证器遇到的问题抛出的异常没有能被指定的TaskValidException.class方法拦截到。故写这个原因全局异常拦截只能拦截相同的异常。只能通过解析转入自定义的异常。自定义的异常继承的异常要是一家子的。如TaskValidException和ValidationException。这样就能在…...

编程日记 2025/8/5 5:53:55

LeetCode 解题思路 47（最长回文子串、最长公共子序列）

解题思路： dp 数组的含义： dp[i][j] 是否为回文子串。递推公式： dp[i][j] s.charAt(i) s.charAt(j) && dp[i 1][j - 1]。dp 数组初始化： 单字符 dp[i][i] true，双字符 dp[i][i 1] s.charAt(i) s.charA…...

编程日记 2025/7/31 13:35:35

P11369 [Ynoi2024] 弥留之国的爱丽丝（操作分块，DAG可达性trick）

真的神仙题。感觉学到了很多。题意： 给你一张 n n n 个结点 m m m 条边的有向图，点编号为 1 , 2 , … , n 1,2,\dots,n 1,2,…,n。每条边的颜色为黑色或白色。一开始所有 m m m 条边都是黑色的。你需要进行 q q q 次操作，有两种操作…...

编程日记 2025/7/31 13:35:33

NAT穿越

概述 IPSec协商是通过IKE完成--->ISAKMP协议完成--->由UDP封装，源目端口均为500。 NAT--->NAPT，同时转换IP和端口信息。对端设备会查验收到的数据报文中的源IP和源端口，其中源IP可以设定为NAT转换后的IP，但是源端口无法…...

编程日记 2025/7/31 13:35:31

不黑文化艺术学社首席艺术家孙溟㠭浅析“雪渔派”

孙溟㠭浅析“雪渔派” 何震字主臣 ，长卿，号雪渔，安徽婺源（今江西）人，是明代著名的篆刻家和书法家，与文彭独树一帜，实现书法与刀法的统一。云中白鹤笑谭间气吐霓虹边款其篆刻吸…...

编程日记 2025/7/31 13:35:29

【Linux操作系统】第一弹——Linux基础篇

文章目录 💡 一. Linux的基本常识🪔 1.1 linux网络连接三种方式🪔1.2 虚拟机的克隆🪔1.3 虚拟机的快照🪔1.4 虚拟机的迁移和删除🪔1.5 vmtools工具 💡二. Linux的目录结构🪔2.1 Linu…...

编程日记 2025/7/31 13:35:27

“ES7+ React/Redux/React-Native snippets“常用快捷前缀

请注意，这是一个常用的列表，不是扩展提供的所有前缀。最完整和最新的列表请参考扩展的官方文档或在 VS Code 中查看扩展的详情页面。 React (通常用于 .js, .jsx, .ts, .tsx): rfce: React Functional Component with Export Defaultrafce: React Arro…...

编程日记 2025/7/31 13:35:25

selenium替代----playwright

安装好处特点：这个东西不像selenium需要固定版本的驱动 pip config set global.index-url https://mirrors.aliyun.com/pypi/simplepip install --upgrade pippip install playwright playwright installplaywright install ffmpeg (处理音视频的)验证&#x…...

编程日记 2025/7/31 13:35:23

2025年社交APP安全防御指南：抵御DDoS与CC攻击的实战策略

2025年，社交APP的用户规模与业务复杂度持续增长，但随之而来的DDoS与CC攻击也愈发隐蔽和智能化。攻击者通过AI伪造用户行为、劫持物联网设备，甚至利用区块链漏洞发起混合攻击，对平台稳定性与用户数据安全构成严峻挑战。本文将结合最…...

编程日记 2025/7/31 13:35:21

PHP会话技术

第十六章-PHP会话技术 PHP会话技术是构建动态、个性化Web应用的核心机制之一，它通过跟踪用户在网站上的连续操作状态，实现了网页间的数据持久化交互。无论是电商平台的购物车信息保存、社交媒体的用户登录状态维持，还是表单数据的跨页面传递…...

编程日记 2025/7/31 13:35:19

QT聊天项目DAY10

1.封装redis操作类头文件 #ifndef REDISMANAGE_H #define REDISMANAGE_H#include "Singletion.h" #include "GlobalHead.h"class RedisManage : public Singletion<RedisManage> {friend class Singletion<RedisManage>; public:~RedisMana…...

编程日记 2025/8/4 23:21:07

5.0.5 变换(旋转、缩放、扭曲）

WPF变换可以产生特殊效果，如平移、旋转、扭曲。变换类描述TranslateTransform沿着X轴和Y轴平移ScaleTransform 沿着定义的中心点缩放RotateTransform沿着定义的中心点旋转SkewTransform 扭曲元素MatrixTransfrom提供3x3矩阵，用于定义一个自定义变换 1…...

编程日记 2025/7/31 13:35:14

matlab转python

1 matlab2python开源程序 https://blog.csdn.net/qq_43426078/article/details/123384265 2 网址转换网址：https://app.codeconvert.ai/code-converter?inputLangMatlab&outputLangPython 文件比较网址：https://www.diffchecker.com/text-comp…...

编程日记 2025/7/31 13:35:13

什么是直播美颜SDK？跨平台安卓、iOS美颜SDK开发实战详解

时下，尤其在社交、娱乐、电商等应用场景中，一个流畅且效果自然的美颜功能往往能直接影响用户的留存率和平台的营收。要实现这些效果，美颜SDK是核心工具。那么，什么是直播美颜SDK？它的功能有哪些？如何进行跨…...

编程日记 2025/7/30 15:48:31

大尺寸PCB如何重塑通信与新能源产业格局

在5G通信基站与新能源电站的机房内，一块块面积超过600mm600mm的PCB板正悄然推动着技术革命。作为电子设备的核心载体，大尺寸PCB凭借其高密度集成与复杂工艺，成为通信、能源等领域的“隐形功臣”。以猎板PCB为代表的厂商，凭借宽幅曝…...

编程日记 2025/8/4 10:26:45

JavaSE核心知识点02面向对象编程02-04（包和导入）

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录 JavaSE核心知识点02面向对象编程02-04&#…...

编程日记 2025/7/31 15:53:26

【漫话机器学习系列】249.Word2Vec自然语言训练模型

【自然语言处理】用 Word2Vec 将词语映射到向量空间详解一、背景介绍在自然语言处理（NLP）领域，我们常常需要将文本信息转化为机器能够理解和处理的形式。传统的方法，如 one-hot编码，虽然简单，但存在严重…...

编程日记 2025/7/31 13:35:06

CSS transition过渡属性

transition 是 CSS 中用于创建平滑动画效果的属性，它允许元素在两个状态之间平滑过渡，而不是立即改变。通过定义过渡的属性、持续时间和速度曲线，你可以实现丰富的交互体验，如悬停效果、状态切换动画等。核心作用平滑过渡&…...

编程日记 2025/8/2 12:38:22

U9C对接飞书审批流完整过程

U9C虽然很强大，但是移动办公和审批流功能并不好用，为了弥补U9C这种不足，很多的企业在使用U9C的同时再开通钉钉、飞书、企业微信这种OA管理系统，两套系统并行使用，就需要考虑U9C和OA系统数据同步的问题，最简…...

编程日记 2025/7/31 13:35:02

阿里云 SLS 多云日志接入最佳实践：链路、成本与高可用性优化

作者：裘文成（翊韬） 摘要随着企业全球化业务的扩展，如何高效、经济且可靠地将分布在海外各地的应用与基础设施日志统一采集至阿里云日志服务 (SLS) 进行分析与监控，已成为关键挑战。本文聚焦于阿里云高性能日志采集…...

编程日记 2025/7/31 13:35:00

从0开始学习大模型--Day04--大模型的框架以及基本元素

Agent框架与策略分析计划与执行（planning-and-Execute） 该框架侧重于先规划一系列的行动，然后执行。这个框架可以使大模型能够先综合考虑任务的多个方面，然后按照计划进行行动，比较适合应用在较复杂的项目管理中或者…...

编程日记 2025/8/3 11:21:38

FPGA实战项目2———多协议通信控制器

1. 多协议通信控制器模块 (multi_protocol_controller) 简要介绍这是整个设计的顶层模块，承担着整合各个子模块的重要任务，是整个系统的核心枢纽。它负责协调 UART、SPI、I2C 等不同通信协议模块以及 DMA 模块的工作，同时处理不同时钟域之间的信号交互，确保各个模块能够…...

编程日记 2025/7/31 13:34:55

strings.Builder 使用详解

目录 1. 官方包 2. 支持版本 3. 官方说明官方示例方法 func (b *Builder) Cap() int func (b *Builder) Grow(n int) func (b *Builder) Len() int func (b *Builder) Reset() func (b *Builder) String() string func (b *Builder) Write(p []byte) (int, error)…...

编程日记 2025/7/31 13:34:52

数巅智能携手北京昇腾创新中心深耕行业大模型应用

当前，AI技术正在加速向各行业深度渗透,成为驱动产业转型和社会经济发展的重要引擎。构建开放协作的AI应用生态体系、推动技术和应用深度融合，已成为行业发展的重要趋势。近日，数巅智能与北京昇腾人工智能计算中心（北京昇腾创新中…...

编程日记 2025/8/5 4:48:23

【嵌入式系统设计师（软考中级）】第二章：嵌入式系统硬件基础知识——⑤电源及电路设计

文章目录 7. 嵌入式系统电源分类及管理7.1 嵌入式系统电源分类7.2 电源管理技术7.3 电源完整性设计 8. 电子电路设计8.1 电子电路设计基础知识8.1.1 电子电路设计原理8.1.2 电子电路设计方法及步骤8.1.3 电子电路可靠性设计 8.2 PCB设计基础知识8.2.1 PCB设计原理8.2.2 PCB设计…...

编程日记 2025/7/31 13:34:48

排序算法-希尔排序

希尔排序是插入排序的改进版，通过将原始数组分成多个子序列进行间隔插入排序，逐步缩小间隔直至为1，最终完成整体排序。它也被称为缩小增量排序。希尔排序步骤选择增量序列（Gap Sequence）：确定一个递减的…...

编程日记 2025/8/2 9:34:38

JAVA继承中变量和方法的存储和方法中访问变量的顺序

一、变量归属与内存位置 static 变量：属于类，只存在一份，保存在方法区（或元空间）。实例变量（非static）：属于对象，每个对象单独一份，保存在堆内存中。二、…...

编程日记 2025/7/31 12:36:54

【PhysUnits】3.3 SI 基础量纲单位（units/base.rs）

一、源码这段代码定义了一系列基础物理量纲的类型别名，并使用标记 trait Canonical 来表示它们是国际单位制（SI）中的基本单位。 use crate::Dimension; use typenum::{P1, Z0};/// 标记特质，表示基础量纲单位 pub trait Canoni…...

编程日记 2025/8/2 10:36:11

stm32F103芯片实现PID算法控制温度例程

目录硬件需求软件需求步骤 1. 配置STM32CubeMX 2. 编写PID控制代码 3. 编译和烧录 4. 测试注意事项要在STM32F103芯片上实现PID算法控制温度，首先需要确保你有一套完整的硬件和软件开发环境。这里，我将给你一个简化的例程，展示如何使用PID控制算法来调节一个假…...

编程日记 2025/7/31 12:36:50

Java学习手册：微服务设计原则

一、单一职责原则每个微服务应该专注于一个特定的业务功能，具有清晰的职责边界。这有助于保持服务的简洁性，降低服务之间的耦合度，提高服务的可维护性和可扩展性。例如，可以将用户管理、订单管理、支付管理等功能分别设计为独立…...

编程日记 2025/7/31 12:36:48

【挑战项目】 --- 微服务编程测评系统（在线OJ系统）（二）

三十二、Swagger介绍&使用官网：https://swagger.io/ 什么是swagger Swagger是一个接口文档生成工具，它可以帮助开发者自动生成接口文档。当项目的接口发生变更时，Swagger可以实时更新文档，确保文档的准确性和时效性。Swagger还内置了测试功能，开发者可以直接在文档中…...

编程日记 2025/7/31 12:36:47

Unity背景随着文字变化而变化

组件结构： 背景（父）需要添加如下两个组件根据具体情况选择第一个组件水平还是垂直，一般垂直用的比较多效果展示： 此时在文本框中改变内容背景图都会随着变化，动态的...

编程日记 2025/7/31 12:36:45

Elasticsearch内存管理与JVM优化：原理剖析与最佳实践

#作者：孙德新文章目录一、Elasticsearch缓存分类1、Node Query Cache：2、Shard Request Cache：3、Fielddata Cache： 三、内存常见的问题案例一案例二案例三案例四四、内参分配最佳实践1、jvm heap分配2、将机器上少于一半的内…...

编程日记 2025/7/31 12:36:43

快速开发-基于Gin框架搭建web应用

一、概述 Go 语言的 Gin 框架是一个用 Go (Golang) 编写的 Web 框架，它旨在提供一种快速、简洁且高效的方式来构建 Web 应用程序。Gin 框架以其高性能和易用性而闻名，非常适合构建 API 服务、Web 服务和其他需要高性能的 Web 应用。二、Gin框架…...

编程日记 2025/7/31 12:36:41

【RAG】RAG系统——langchain 的用法（说人话版与专业版）

说人话版： RAG就是一句话：对数据设置索引，用问题去检索，用llm生成回答首先，做本地知识库注意: py 3.10以上配置环境变量，安装库 load外部数据，存储到本地的一个index里（这是最…...

编程日记 2025/8/1 20:51:49

pycharm无法直接识别wsl

原因是我的2020 无法支持这个版本的wsl 我就换成2024版添加中可以看到 on wsl 如果你想切到自己创建的虚拟环境你在下面这个界面选择conda就好这样就可以切换成你想要的环境了...

编程日记 2025/7/31 12:36:38

数据结构每日一题day17（链表）★★★★★

题目描述：假设有两个按元素值递增次排列的线性表，均以单链表形式存储。请编与算法将这两个单链表归并为一个按元素值依次递减排列的单链表,并要求利用原来两个单链表的结点存放归并后的单链表。算法思想： 1.初始化： 创建一个新…...

编程日记 2025/7/31 12:36:36

遗传算法（GA）

基本原理算法介绍遗传算法（Genetic Algorithm，简称GA）是一种基于自然选择和遗传学原理的搜索和优化技术。它模拟了生物进化过程，通过选择、交叉（重组）和变异等操作，逐步优化问题的解。遗传…...

编程日记 2025/7/31 12:36:34

EPS三维测图软件

EPS三维测图软件EPS2016...

编程日记 2025/8/2 23:22:48

设计模式-命令模式

写在前面 Hello，我是易元，这篇文章是我学习设计模式时的笔记和心得体会。如果其中有错误，欢迎大家留言指正！ 一、什么是命令模式？ 命令模式是行为模式中的一种，通过将请求封装成对象，使开发者可…...

编程日记 2025/8/1 3:48:15

深入理解主从数据库架构与主从复制

目录前言1. 主从数据库概述1.1 什么是主从数据库？1.2 主从数据库的应用场景 2. 主从数据库的工作原理2.1 主从数据库的读写分离2.2 数据同步机制2.3 异步与同步复制模式 3. 主从复制的实现步骤3.1 配置主库3.2 配置从库 4. 主从数据库架构的优缺点4.1 优点4.2 缺点…...

编程日记 2025/7/31 15:53:21

【C】初阶数据结构15 -- 计数排序与稳定性分析

本文主要讲解七大排序算法之外的另一种排序算法 -- 计数排序目录 1 计数排序 1） 算法思想 2） 代码 3） 时间复杂度与空间复杂度分析 （1） 时间复杂度 （2） 空间复杂度 4） 计…...

编程日记 2025/8/4 18:23:56

@PostConstruct @PreDestroy

PostConstruct 是 Java EE（现 Jakarta EE）中的一个注解，用于标记一个方法在对象初始化完成后立即执行。它在 Spring 框架、Java Web 应用等场景中广泛使用，主要用于资源初始化、依赖注入完成后的配置等操作。 1. 基本作用执行时…...

编程日记 2025/7/31 15:53:17

2025数维杯数学建模A题完整限量论文：空中芭蕾——蹦床运动的力学行为分析

2025数维杯数学建模A题完整限量论文：空中芭蕾——蹦床运动的力学行为分析 ，先到先得 A题完整论文https://www.jdmm.cc/file/2712067/ 蹦床（ Trampoline ）是一项运动员利用蹦床的反弹，在空中展示技能技巧的竞技运动&…...

编程日记 2025/7/31 15:53:16

Kubernetes Gateway API 部署详解：从入门到实战

引言在 Kubernetes 中管理网络流量一直是一个复杂而关键的任务。传统的 Ingress API 虽然广泛使用，但其功能有限且扩展性不足。Kubernetes Gateway API 作为新一代标准，提供了更强大的路由控制能力，支持多协议、跨命名空间路由和细粒度的流量管理。本文将带你从零开始部署…...

编程日记 2025/8/3 15:26:58

移动设备常用电子屏幕类型对比

概述 LCD 家族 （TN、STN、TFT、IPS、VA）依赖背光，性能差异主要来自液晶排列和驱动方式。OLED 以自发光为核心优势，但成本与寿命限制其普及。E-Paper 专为低功耗静态显示设计，与传统屏幕技术差异显著。参数LCD&#…...

编程日记 2025/7/31 15:53:12

一、canvas文档：