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

H5 Canvas 举牌小人

news 2026/2/9 12:58:20

之前看到这种的举牌小人的图片觉得很有意思，最近有时间所以就尝试写写看。

在线链接
https://linyisonger.github.io/H5.Examples/?name=./080.Canvas%20%E4%B8%BE%E7%89%8C%E5%B0%8F%E4%BA%BA.html
生成效果
请添加图片描述
实现代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./assets/global.css"><style>.content {display: flex;}.content textarea {width: 300px;resize: none;border-radius: 0;outline: none;border-right-width: 0;}.content .save-btn {padding: 10px;background-color: #eefdfd;font-size: 15px;cursor: pointer;user-select: none;border-color: rgb(133, 133, 133);border-width: 1px; }.content .save-btn:disabled {background-color: #b3b3b3;}</style>
</head><body><div class="content"><textarea rows="2" placeholder="请输入需要生成的举牌文字"></textarea><button class="save-btn" disabled>保存图片</button></div><canvas id="preview"></canvas><script type="module">import { Randoms } from "https://gcore.jsdelivr.net/npm/@3r/tool/lib/randoms.js";/** @type {HTMLCanvasElement} */let canvas = document.querySelector("#preview")let ctx = canvas.getContext('2d')/*** 随机人物*/function randomPerson() {let length = 41;let width = 80;let height = 165let index = Randoms.int(0, length)return {sx: index * width,sy: 0,sw: width,sh: height,}}/*** 绘制字符*/function drawChar(char, x, y, w, h) {let charCenterX = x + 38let charCenterY = y + 28ctx.drawImage(image, ...Object.values(randomPerson()), x, y, w, h)ctx.font = '18px Helvetica'ctx.textAlign = "center"ctx.textBaseline = "middle"ctx.save();ctx.translate(charCenterX, charCenterY);ctx.rotate(Math.PI / 6);ctx.fillText(char, 0, 0)ctx.restore();}/*** 渲染文字* 1.分行决定渲染图片大小* 2.逐行偏移*/function drawText(text) {ctx.clearRect(0, 0, canvas.width, canvas.height)let rows = text.split('\n')// 预处理let drawCharParams = []let maxX = 0;let maxY = 0;let width = 80;let height = 165;for (let i = 0; i < rows.length; i++) {let cols = rows[i].split('')let offsetX = (rows.length - i - 1) * (width / 2)let offsetY = i * (width / 2);for (let j = 0; j < cols.length; j++) {const char = cols[j];if (char === ' ') continue // 空字符跳过 let x = j * 40 + offsetX;let y = j * 15 + offsetY;maxX = Math.max(maxX, x)maxY = Math.max(maxY, y)drawCharParams.push([char, x, y, width, height])}}// 更新画布大小canvas.setAttribute('style', `width:${maxX + width}px;height:${maxY + height}px`)canvas.width = canvas.clientWidth;canvas.height = canvas.clientHeight;// 处理for (let i = 0; i < drawCharParams.length; i++) {drawChar(...drawCharParams[i])}}let image = new Image()image.src = './assets/upup.png'let textareaDom = document.querySelector(".content textarea")textareaDom.addEventListener('change', (e) => {let text = e.target.valuedrawText(text)})let saveBtnDom = document.querySelector('.save-btn')saveBtnDom.addEventListener('click', (e) => {let a = document.createElement('a');a.href = window.URL.createObjectURL(base64ToBlob(canvas.toDataURL("image/png", 0.8)));a.setAttribute('download', '举牌小人.png');a.click();})image.onload = () => {saveBtnDom.disabled = false}// base64 转 Blobfunction base64ToBlob(base64) {let arr = base64.split(',');let mime = arr[0].match(/:(.*?);/)[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime })}</script>
</body></html>

在线预览
https://linyisonger.github.io/H5.Examples/
源码仓库
https://github.com/linyisonger/H5.Examples.git

相关文章：

H5 Canvas 举牌小人

之前看到这种的举牌小人的图片觉得很有意思&#xff0c;最近有时间所以就尝试写写看。 在线链接 https://linyisonger.github.io/H5.Examples/?name./080.Canvas%20%E4%B8%BE%E7%89%8C%E5%B0%8F%E4%BA%BA.html 生成效果 实现代码 <!DOCTYPE html> <html lang"…...

编程日记 2024/10/17 2:10:34

rom定制系列------小米6x_澎湃os1.0.28安卓13定制固件修改 刷写过程与界面预览

&#x1f49d;&#x1f49d;&#x1f49d; 在接待很多定制化系统过程中。小米6x机型为很多工作室客户使用。但官方低版本固件无法适应新应用的使用。有些第三方固件却可以完美解决。此固件是客户分享的卡刷固件。需要修改为可以批量刷写的线刷固件。去除一些内置应用。需要自带…...

编程日记 2024/10/17 2:09:33

电脑硬件性能：HDD + SSD + CPU + GPU

文章目录 任务管理器&#xff1a;性能参数详解一、电脑的硬件组成二、机械硬盘和固态硬盘2.1、详细介绍&#xff1a;HDD SSD2.2、读写性能2.2.1、&#xff08;HDD&#xff09;读写性能的影响因素&#xff1a;寻道时间 旋转延迟 数据传输时间2.2.2、&#xff08;SSD&#xff…...

编程日记 2024/10/17 2:06:30

通过粒子系统customData传值给材质球

粒子特效使用的材质球&#xff0c;如果通过动画控制shader的某个参数&#xff0c;例如溶解阈值&#xff0c;所有的粒子都会按照相同的数值变化&#xff0c;如果需要每个粒子在自己的生命周期内按照曲线变化&#xff0c;则可以通过customData实现。 1.ParticleSystem中勾选Cust…...

编程日记 2024/10/17 2:05:27

常用分布的数学期望、方差、特征函数

文章目录 相关教程相关文献常用分布的数学期望&方差&特征函数定义事件域概率条件概率随机变量分布函数连续随机变量的概率密度函数数学期望离散随机变量连续随机变量 方差与标准差最大似然估计特征函数 不等式Chebyshev&#xff08;切比雪夫&#xff09;不等式 作者&am…...

编程日记 2024/10/17 2:02:24

ssh-配置

生成 SSH 密钥是一项重要的安全措施&#xff0c;用于在客户端和服务器之间建立加密连接。以下是在 Windows 和 Linux 系统上生成 SSH 密钥的详细步骤。 一、在 Linux 上生成 SSH 密钥 Linux 通常预装了 ssh-keygen 工具&#xff0c;可以通过以下步骤生成 SSH 密钥&#xff1a…...

编程日记 2024/10/17 2:00:22

Python 在 JMeter 中如何使用？

要在JMeter中使用Python&#xff0c;需要使用JSR223 Sampler元素来执行Python脚本。使用JSR223 Sampler执行Python脚本时&#xff0c;需要确保已在JMeter中配置了Python解释器&#xff0c;并设置了正确的环境路径。 1、确保JMeter已安装Python解释器&#xff0c;并将解释器的路…...

编程日记 2024/10/17 1:59:21

贪心day1

文章目录 前言雪糕的最大数量重新分装苹果装满石头的背包的最大数量K 次取反后最大化的数组和不同整数的最少数目 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;文章题目大多来自于 leetcode&#xff0c;当然也可能来自洛…...

编程日记 2024/10/17 1:58:20

Redis 完整指南：命令与原理详解

目录 1. Redis 概述什么是 RedisRedis 应用场景 2. 安装与启动Redis 安装步骤源代码安装使用包管理器安装&#xff08;以 Ubuntu 为例&#xff09; 编译与启动命令编客户端连接 3. Redis 存储结构KV 存储结构数据结构类型String&#xff08;字符串&#xff09;List&#xff08;…...

编程日记 2024/10/17 1:56:18

【2024软考高级架构师】论文篇——3、论Web系统的测试技术及其应用

【摘要】 本人于2023年8月参与了某地级市的市级机关电子政务信息系统的建设工作，该项目是该市机关的电子政务网建设计划的一部分，笔者在该项目中担任项目经理和系统分析师一职，主要负责项目的日常全面管理和质量保证与质量控制工作。该项目是基于WEB系统的，由于WEB系统具有…...

编程日记 2024/10/17 1:55:16

迪杰斯特拉算法的理解

图片转载自&#xff1a;最短路径算法-迪杰斯特拉(Dijkstra)算法 - 程序小哥爱读书的文章 - 知乎 https://zhuanlan.zhihu.com/p/346558578 迪杰斯特拉&#xff0c;一个广度优先算法&#xff0c;采用了贪心策略。 第一步&#xff0c;选取顶点D&#xff0c;更新和D相连的节点C&a…...

编程日记 2024/10/17 1:54:14

华为OD机试 - 文本统计分析（Python/JS/C/C++ 2024 E卷 200分）

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加入华为OD刷题交流群&#xff0c;…...

编程日记 2024/10/17 1:52:11

计算机挑战赛9

Excel表列名称由字母A~Z组成&#xff0c;列字母的规律如下: A、B、C.、AA、AB....AZ、BA、B...ZZZZY、ZZZZ...输入: 输入包含两个列名称字符串&#xff0c;长度均小于等于5。 输出: 输出两个列名称之间共有多少列 样例输入: AA AZ 样例输出: 24 代码&#xff1a; C&…...

编程日记 2024/10/17 1:51:10

C++学习路线（十六）

void类型指针 void -> 空类型 void* -> 空类型指针&#xff0c;只存储地址的值&#xff0c;丢失类型&#xff0c;无法访问&#xff0c;要访问里面的值 我们必须对指针进行正确的类型转换&#xff0c;然后再间接引用指针 所有其它类型的指针都可以隐式自动转换成 void 类型…...

编程日记 2024/10/17 1:50:09

2024年最受欢迎的AI工具与实际应用：AI技术对未来生活的深远影响

2024年最受欢迎的AI工具与实际应用&#xff1a;AI技术对未来生活的深远影响 随着2024年的到来&#xff0c;人工智能&#xff08;AI&#xff09;技术已经深入渗透到我们生活的方方面面。从日常工作到科学研究&#xff0c;AI工具的应用变得越来越广泛。无论是生成式AI工具&#…...

编程日记 2024/10/17 1:49:08

【网络安全】账户安全随笔

未经许可，不得转载。 作者：Enoch 原文出处：https://mp.weixin.qq.com/s/oKBpZ0F6Kl5NNmHSYCYIPw 文章目录 账户类型资金划转问题幂等ID使用错误多接口并发问题精度问题其他划转问题特殊资金盗取问题科学计数法问题账户类型 在互联网金融和电商企业中，账户安全直接关系到用…...

编程日记 2024/10/17 1:48:07

在线培训知识库管理系统：教育行业的新动力

在当今数字化时代&#xff0c;教育行业正经历着前所未有的变革。随着在线教育的兴起&#xff0c;如何高效地管理和传播知识成为了一个关键问题。在线培训知识库管理系统应运而生&#xff0c;它以其强大的知识整合、分享和管理能力&#xff0c;为教育行业注入了新的活力。 一、…...

编程日记 2024/10/17 1:47:06

【AI声音克隆本地整合包及教程】第二代GPT-SoVITS V2：声音克隆的新境界

在数字时代的浪潮中&#xff0c;个性化和创新是永恒的主题。GPT-SoVITS V2&#xff0c;作为第二代声音克隆技术&#xff0c;正以其革命性的特性和应用&#xff0c;为个人和企业打开一扇通往声音个性化的新大门。 声音克隆的新高度 GPT-SoVITS V2是由RVC变声器创始人“花儿不哭…...

编程日记 2024/10/17 1:44:04

博看书苑 8.8.1| 免费阅读海量图书期刊

博看书苑是一款免费的图书和期刊阅读神器&#xff0c;拥有海量的图书和期刊资源&#xff0c;涵盖了文学、历史、科技、教育等多个领域。无论你是想深入研究某个专业领域&#xff0c;还是想在闲暇时阅读一些轻松的读物&#xff0c;博看书苑都能满足你的需求。更令人惊喜的是&…...

编程日记 2024/10/17 1:42:00

导致动态代理无法使用的原因有哪些？

在动态代理的应用过程中&#xff0c;有时会遇到其无法正常使用的情况。这种现象可能源于多种原因&#xff0c;从网络配置到软件设置&#xff0c;了解和解决这些问题对保持代理的高效运行至关重要。本文将详细探讨导致动态代理无法使用的主要原因及对策&#xff0c;以帮助用户及…...

编程日记 2024/10/17 1:40:58

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/2/8 20:42:48

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2026/1/29 2:11:35

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2026/1/31 23:23:23

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2026/2/2 2:47:37

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2026/2/4 19:47:03

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2026/2/6 1:00:25

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2026/1/23 11:58:06