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

canvas画板！随意画！！

article 2025/10/14 12:27:33

希望你天天开心

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘画板</title><style>#canvas {border: 1px solid black;border-radius: 5px;}.menu {display: flex;}.button {margin: 5px;}</style>
</head><body><div class="menu"><div class="button">画板</div><div class="button" id="clear">重置</div><div class="button" id="save">保存</div></div><div class="window"><div class="top"><div class="button"></div><div class="button"></div><div class="button"></div></div></div><canvas id="canvas" width="500" height="500"></canvas><script>let painting = false; // 记录绘画let startPoint = { x: undefined, y: undefined }; // 记录起点的位置const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// 鼠标点击canvas.onmousedown = (e) => {let x = e.offsetX;let y = e.offsetY;startPoint = { x: x, y: y };painting = true;}// 鼠标移动canvas.onmousemove = (e) => {let x = e.offsetX;let y = e.offsetY;let newPoint = { x: x, y: y };if (painting) {drawLine(startPoint.x, startPoint.y, newPoint.x, newPoint.y);startPoint = newPoint;}}// 鼠标离开canvas.onmouseup = () => {painting = false;}// 绘制方法function drawLine(xStart, yStart, xEnd, yEnd) {ctx.beginPath();ctx.lineWidth = 3;ctx.moveTo(xStart, yStart);ctx.lineTo(xEnd, yEnd);ctx.stroke();ctx.closePath();}clear.onclick = () => {ctx.fillStyle = "#fff";ctx.clearRect(0, 0, canvas.width, canvas.height);// ctx.fillRect(0, 0, canvas.width, canvas.height); // 同上面效果一致}save.onclick = () => {const url = canvas.toDataURL("image/jpg");const a = document.createElement("a");a.href = url;a.download = "画板";a.target = "_blank";a.click();}</script>
</body></html>

相关文章：

canvas画板！随意画！！

希望你天天开心 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>绘画板</title…...

编程日记 2025/10/4 9:21:52

Float32、Float16、BFloat16

我们先介绍 Float32、Float16、BFloat16 的 浮点数表示方法 然后根据浮点数表示&#xff0c;来分析总结他们是怎么控制 精度和 数值范围 的 最后再来对比的说明 Float32、Float16、BFloat16 的 应用场景 和 硬件支持 1、浮点数的表示方法 Float32 &#xff1a; 单精度浮点数…...

编程日记 2025/10/7 1:29:13

C# new Bitmap(32043, 32043, PixelFormat.Format32bppArgb)报错：参数无效，如何将图像分块化处理？

C#处理非常大的图像&#xff08;如 32043x32043 像素&#xff09;时&#xff0c;确实需要采取分块化处理的方法来避免内存不足的问题。分块化处理可以将大图像分割成多个较小的块&#xff0c;分别进行处理和保存&#xff0c;最后再合并这些块以形成完整的图像。以下是一个详细的…...

编程日记 2025/10/3 2:57:01

5V 1A充电标准的由来与技术演进——从USB诞生到智能手机时代的电力革命

点击下面图片带您领略全新的嵌入式学习路线 &#x1f525;爆款热榜 88万阅读 1.6万收藏 一、起源&#xff1a;USB标准与早期电力传输需求 1. USB的诞生背景 1996年&#xff0c;由英特尔、微软、IBM等公司组成的USB-IF&#xff08;USB Implementers Forum&#xff09;发布了…...

编程日记 2025/10/14 1:20:55

微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】

文章目录 一、准备工作1. 硬件准备2. 开发环境 二、小程序配置1. 修改app.json 三、完整代码实现1. pages/index/index.wxml2. pages/index/index.wxss3. pages/index/index.js 四、ESC/POS指令说明五、测试流程六、常见问题解决七、进一步优化建议 下面我将提供一个完整的微信…...

编程日记 2025/9/26 8:14:29

龙虎榜——20250425

指数依然在震荡&#xff0c;等待方向选择&#xff0c;整体量能不搞但个股红多绿少。 2025年4月25日龙虎榜行业方向分析 一、核心主线方向 绿色电力&#xff08;政策驱动业绩弹性&#xff09; • 代表标的&#xff1a;华银电力&#xff08;绿电运营&#xff09;、西昌电力&…...

编程日记 2025/10/11 18:40:19

计算机组成原理:指令系统

计算机组成原理：指令集系统 指令集体系结构(ISA)ISA定义ISA包含的内容举个栗子指令的基本组成(操作码+地址码)指令分类：地址码的个数定长操作码变长操作码变长操作码的原则变长操作码的设计指令寻址寻址方式的目的寻址方式分类有效地址直接在指令中给出有效地址间接给出有效地…...

编程日记 2025/10/12 21:30:56

【Go语言】RPC 使用指南（初学者版）

RPC&#xff08;Remote Procedure Call&#xff0c;远程过程调用&#xff09;是一种计算机通信协议&#xff0c;允许程序调用另一台计算机上的子程序&#xff0c;就像调用本地程序一样。Go 语言内置了 RPC 支持&#xff0c;下面我会详细介绍如何使用。 一、基本概念 在 Go 中&…...

编程日记 2025/10/4 6:16:25

Python----深度学习（基于深度学习Pytroch簇分类，圆环分类，月牙分类）

一、引言 深度学习的重要性 深度学习是一种通过模拟人脑神经元结构来进行数据学习和模式识别的技术&#xff0c;在分类任务中展现出强大的能力。 分类任务的多样性 分类任务涵盖了各种场景&#xff0c;例如簇分类、圆环分类和月牙分类&#xff0c;每种任务都有不同的…...

编程日记 2025/9/29 13:43:01

入侵检测系统（IDS）与入侵防御系统（IPS）：功能对比与部署实践

入侵检测系统&#xff08;IDS&#xff09;与入侵防御系统&#xff08;IPS&#xff09;&#xff1a;功能对比与部署实践 在网络安全防御体系中&#xff0c;入侵检测系统&#xff08;Intrusion Detection System, IDS&#xff09;与入侵防御系统&#xff08;Intrusion Preventio…...

编程日记 2025/7/9 17:19:27

uniapp-商城-38-shop 购物车 选好了 进行订单确认4 配送方式1

配送方式在订单确认页面最上方&#xff0c;可以进行选中配送还是自提&#xff0c;这里先看看配送。 代码样式&#xff1a; 可以看出来是通过组件来实现的。组件名字是&#xff1a;delivery-layout 1、建立组件文件夹和页面&#xff0c;delivery-layout这里就只有配送 2、具体…...

编程日记 2025/10/11 2:21:31

uniappx 打包配置32位64位x86安装包

{"app": {"distribute": {"android": {"abiFilters": ["armeabi-v7a","arm64-v8a","x86","x86_64"]}}} }...

编程日记 2025/9/25 15:47:51

【深度强化学习 DRL 快速实践】逆向强化学习算法 (IRL)

Inverse Reinforcement Learning (IRL) 详解 什么是 Inverse Reinforcement Learning&#xff1f; 在传统的强化学习 (Reinforcement Learning, RL) 中&#xff0c;奖励函数是已知的&#xff0c;智能体的任务是学习一个策略来最大化奖励 而在逆向强化学习 (Inverse Reinforc…...

编程日记 2025/10/6 6:13:15

《普通逻辑》学习记录——性质命题及其推理

目录 一、性质命题概述 二、性质命题的种类 2.1、性质命题按质的分类 2.2、性质命题按量的分类 2.3、性质命题按质和量结合的分类 2.4、性质命题的基本形式归纳 三、四种命题的真假关系 3.1、性质命题与对象关系 3.2、四种命题的真假判定 3.3、四种命题的对当关系 四、四种命题…...

编程日记 2025/10/12 4:25:15

人工智能(AI)对网络管理的影响

近年来&#xff0c;人工智能(AI)尤其是大语言模型(LLMs)的快速发展&#xff0c;正在深刻改变网络管理领域。AI的核心价值在于其能够通过自动化、模式分析和智能决策&#xff0c;显著提升网络运维效率并应对复杂挑战。具体表现为&#xff1a; 快速数据查询与分析​​&#xff1…...

编程日记 2025/10/9 16:23:11

第1讲｜R语言绘图体系总览（Base、ggplot2、ComplexHeatmap等）

目录 第1讲｜R语言绘图体系总览 ✨ 引言：为什么R绘图如此重要？ 🧩 1. Base绘图系统 🧩 2. ggplot2生态系统 🧩 3. ComplexHeatmap超级热图系统 🧩 4. 其他特色绘图库（快速了解） ✏️ 小结一句话 📅 预告下一讲 第1讲｜R语言绘图体系总览 （Base、ggplot…...

编程日记 2025/10/10 5:42:40

embedding_model模型通没有自带有归一化层该怎么处理？

embedding_model 是什么&#xff1a; 嵌入式模型&#xff08;Embedding&#xff09;是一种广泛应用于自然语言处理&#xff08;NLP&#xff09;和计算机视觉&#xff08;CV&#xff09;等领域的机器学习模型&#xff0c;它可以将高维度的数据转化为低维度的嵌入空间&#xff0…...

编程日记 2025/9/26 23:09:29

基于STM32、HAL库的MCP3421A0T模数转换器ADC驱动程序设计

一、简介&#xff1a; MCP3421A0T是Microchip公司生产的一款18位Δ-Σ模数转换器(ADC)&#xff0c;具有以下特点&#xff1a; 18位分辨率 单通道差分输入 可编程增益放大器(PGA)&#xff1a;1, 2, 4, 8 可选的转换速率(3.75/15/60/240SPS) 内部基准电压(2.048V 0.05%) IC…...

编程日记 2025/7/17 15:29:39

八大排序——冒泡排序/归并排序

八大排序——冒泡排序/归并排序 一、冒泡排序 1.1 冒泡排序 1.2 冒泡排序优化 二、归并排序 1.1 归并排序&#xff08;递归&#xff09; 1.2 递归排序&#xff08;非递归&#xff09; 一、冒泡排序 1.1 冒泡排序 比较相邻的元素。如果第一个比第二个大&#xff0c;就交换…...

编程日记 2025/9/26 9:05:29

银发科技：AI健康小屋如何破解老龄化困局

随着全球人口老龄化程度的不断加深&#xff0c;如何保障老年人的健康、提升他们的生活质量&#xff0c;成为了社会各界关注的焦点。 在这场应对老龄化挑战的战役中&#xff0c;智绅科技顺势而生&#xff0c;七彩喜智慧养老系统构筑居家养老安全网。 而AI健康小屋作为一项创新…...

编程日记 2025/9/26 14:44:32

Python实例题：使用Pvthon3编写系列实用脚本

目录 Python实例题 题目 1. 文件重命名脚本 csv_data_statistics.py file_rename.py web_crawler.py 2. CSV 文件数据统计脚本 3. 简单的网页爬虫脚本 运行思路 文件重命名脚本 CSV 文件数据统计脚本 简单的网页爬虫脚本 注意事项 Python实例题 题目 使用Pvthon…...

编程日记 2025/10/9 20:17:38

命令行指引的尝试

效果 步骤 首先初始化一个空的项目&#xff0c;然后安装一些依赖 npm init -y npm install inquirer execa chalk ora至于这些依赖是干嘛的&#xff0c;如下图所示&#xff1a; 然后再 package.json 中补充一个 bin 然后再根目录下新建一个 index.js , 其中的内容如下 #!/…...

编程日记 2025/10/8 16:15:42

Sharding-JDBC 系列专题 - 第九篇：高可用性与集群管理

Sharding-JDBC 系列专题 - 第九篇：高可用性与集群管理 本系列专题旨在帮助开发者全面掌握 Sharding-JDBC，一个轻量级的分布式数据库中间件。本篇作为系列的第九篇文章，将重点探讨 高可用性（High Availability, HA） 和 集群管理，包括数据库高可用方案、Sharding-JDBC 的故…...

编程日记 2025/9/24 20:35:36

【Dify系列教程重置精品版】第1课 相关概念介绍

文章目录 一、Dify是什么二、Dify有什么用三、如何玩转Dify？从螺丝刀到机甲战士的进阶指南官方网站:https://dify.ai github地址:https://github.com/langgenius/dify 一、Dify是什么 Dify（D​​efine + ​​I​​mplement + ​​F​​or ​​Y​​ou）。这是一款开源的大…...

编程日记 2025/9/26 16:54:58

leetcode0106. 从中序与后序遍历序列构造二叉树-medium

1 题目&#xff1a;从中序与后序遍历序列构造二叉树 官方标定难度&#xff1a;中 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入…...

编程日记 2025/10/4 17:04:05

第5.5章：ModelScope-Agent：支持多种API无缝集成的开源框架

5.5.1 ModelScope-Agent概述 ModelScope-Agent&#xff0c;由阿里巴巴旗下ModelScope社区开发&#xff0c;是一个开源的、模块化的框架&#xff0c;旨在帮助开发者基于大型语言模型快速构建功能强大、灵活性高的智能代理。它的核心优势在于支持与多种API和外部系统的无缝集成&…...

编程日记 2025/6/13 1:46:12

Spring Boot默认缓存管理

Spring框架支持透明地向应用程序添加缓存&#xff0c;以及对缓存进行管理&#xff0c;其管理缓存的核心是将缓存应用于操作数据的方法&#xff0c;从而减少操作数据的执行次数&#xff0c;同时不会对程序本身造成任何干扰。Spring Boot继承了Spring框架的缓存管理功能&#xff…...

编程日记 2025/10/11 15:09:37

XYNU2024信安杯-REVERSE（复现）

前言 记录记录 1.Can_you_find_me? 签到题&#xff0c;秒了 2.ea_re 快速定位 int __cdecl main_0(int argc, const char **argv, const char **envp) {int v4; // [esp0h] [ebp-1A0h]const char **v5; // [esp4h] [ebp-19Ch]const char **v6; // [esp8h] [ebp-198h]char v7;…...

编程日记 2025/10/9 18:17:53

MySQL的MVCC【学习笔记】

MVCC 事务的隔离级别分为四种&#xff0c;其中Read Committed和Repeatable Read隔离级别&#xff0c;部分实现就是通过MVCC&#xff08;Multi-Version Concurrency Control&#xff0c;多版本并发控制&#xff09; 版本链 版本链是通过undo日志实现的&#xff0c; 事务每次修改…...

编程日记 2025/10/6 21:10:43

罗德FSP13 FSP40频谱分析仪频率13.6GHz

罗德FSP13 FSP40频谱分析仪频率13.6GHz 附加的功能&#xff1a; 分辨率带宽&#xff1a;1 Hz 至 10 MHz 显示的平均噪音水平&#xff1a;-155 dBm (1 Hz) 相位噪声&#xff1a;10 kHz 时 -113 dB (1 Hz) 附加滤波器&#xff1a;100 Hz 至 5 MHz 的通道滤波器和 RRC 滤波器、…...

编程日记 2025/9/28 5:10:39