使用canvas做了一个最简单的网页版画板，5分钟学会
画板实现的效果：可以切换画笔的粗细，颜色，还可以使用橡皮擦，还可以清除画布，然后将画的内容保存下载成一张图片：
具体用到的canvas功能有：画笔的粗细调整lineWidth，开始一个新的画笔路径beginPath，结束一个画笔路径closePath，这个可以保证不影响之前画的效果，重新开始一个画笔路径。 还有橡皮擦使用的ctx.globalCompositeOperation = 'destination-out'属性，清空画布使用的：ctx.clearRect(0, 0, canvas.width, canvas.height)，保存图片使用的是let url = canvas.toDataURL('image/png')。
完整的代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>像素操作</title><style>.active {background-color: #f2a1a1;}</style></head><body><div>创建一个画布，可以使用画笔随意画画</div><div style="width: 800px; margin-top: 6px"><button class="bold">粗线条</button><button class="thin">细线条</button><input id="color" type="color" /><button class="del">橡皮擦</button><button class="clear">清空画布</button><button class="save">保存图片</button><hr /><canvas id="myCanvas" width="800" height="600"></canvas></div><script>// 获取画布const canvas = document.getElementById('myCanvas')// 获取画笔const ctx = canvas.getContext('2d')// 让画笔的拐弯处更加圆润，没有锯齿感ctx.lineCap = 'round'ctx.lineJoin = 'round'// 获取控制按钮const bold = document.querySelector('.bold')const thin = document.querySelector('.thin')const color = document.querySelector('#color')const del = document.querySelector('.del')const clear = document.querySelector('.clear')const save = document.querySelector('.save')// 添加点击事件bold.onclick = function () {ctx.lineWidth = 20bold.classList.add('active')thin.classList.remove('active')del.classList.remove('active')clear.classList.remove('active')save.classList.remove('active')}thin.onclick = function () {ctx.lineWidth = 5thin.classList.add('active')bold.classList.remove('active')del.classList.remove('active')clear.classList.remove('active')save.classList.remove('active')}color.onchange = function (e) {console.log('颜色改变了:', e.target.value)ctx.strokeStyle = e.target.value}del.onclick = function () {console.log('橡皮擦')ctx.globalCompositeOperation = 'destination-out'ctx.lineWidth = 30del.classList.add('active')bold.classList.remove('active')thin.classList.remove('active')clear.classList.remove('active')save.classList.remove('active')}clear.onclick = function () {console.log('清空画布')ctx.clearRect(0, 0, canvas.width, canvas.height)}// 保存图片save.onclick = function () {console.log('保存图片')let url = canvas.toDataURL('image/png')let a = document.createElement('a')a.href = urla.download = 'canvas.png'a.click()}// 监听画布画画事件let mouseDown = false// 鼠标按下将变量设置为truecanvas.onmousedown = function (e) {ctx.beginPath()mouseDown = truectx.moveTo(e.offsetX, e.offsetY)}// 鼠标抬起将变量设置为falsecanvas.onmouseup = function () {mouseDown = falsectx.closePath()ctx.globalCompositeOperation = 'source-over'}canvas.onmouseleave = function () {mouseDown = falsectx.closePath()}// 鼠标移动canvas.onmousemove = function (e) {if (mouseDown) {console.log('鼠标移动')ctx.lineTo(e.offsetX, e.offsetY)ctx.stroke()}}</script></body>
</html>
相关文章：
使用canvas做了一个最简单的网页版画板，5分钟学会
画板实现的效果：可以切换画笔的粗细，颜色，还可以使用橡皮擦，还可以清除画布，然后将画的内容保存下载成一张图片： 具体用到的canvas功能有：画笔的粗细调整lineWidth，开始一个新的画笔…...
自组织映射Python实现
自组织映射（Self-organizing map）Python实现。仅供学习。 #!/usr/bin/env python3""" Self-organizing map """from math import expimport toolzimport numpy as np import numpy.linalg as LAfrom sklearn.base import…...
如何避免阿里云对象储存OSS被盗刷
网站app图片的云端存储离不开对象存储oss,而最难为的问题就是app做的出名了，少不了同行的攻击，包含ddos，cc攻击以及oss外链被盗刷！ 防盗链功能通过设置Referer白名单以及是否允许空Referer，限制仅白名单中的域名可以访…...
产品研发团队协作神器！10款提效工具大盘点！
在如今科技驱动的时代，产品研发团队面临着前所未有的竞争压力和不断变化的市场需求。为了在这个激烈的环境中脱颖而出，团队需要高效协作并充分利用先进的工具来提高生产力和创新能力。 本文将为你盘点产品研发团队协作必备的10个提效工具，这…...
LSTM 与 GRU
RNN无法处理长距离依赖问题，通俗点就是不能处理一些较长的序列数据，那么今天就来介绍一下两个能处理长距离依赖问题地RNN变种结构，LSTM和GRU。 1. LSTM（Long short-term memory） 1.1 LSTM结构 上左图是普通RNN结构图…...
代码评审CheckList
代码评审CheckList Author: histonevonzohomail.com Date: 2023/10/24 此博客为笔者在工作中总结的经验，适用于笔者所在的工作，具体情况还需各位自己分析以下的分类并不规范，有好的建议可以给我Email值此1024祝全世界的开发者：天天…...
[尚硅谷React笔记]——第5章 React 路由
目录： 对SPA应用的理解对路由的理解前端路由原理路由的基本使用路由组件与一般组件NavLink的使用封装NavLink组件Switch的使用解决样式丢失问题路由的模糊匹配与严格匹配Redirect的使用嵌套路由向路由组件传递params参数向路由组件传递search参数.向路由组件传递st…...
如何去掉不够优雅的IF-ELSE
不够优雅的IF-ELSE： 在一个方法中根据两个参数的不同值组合来返回四种可能的类型，你可以使用条件语句，例如 if-else 语句或 switch 语句，来实现这个逻辑。以下是一个示例，假设你有两个参数 param1 和 param2ÿ…...
Python中defaultdict的使用
文章目录 Python 中的 defaultdict 与 dictPython 中的 defaultdict Python 中 defaultdict 的有用函数Python 中的 defaultdict.clear()Python 中的 defaultdict.copy()Python 中的 defaultdict.default_factory()Python 中的 defaultdict.get(key, default value) 今天的文章…...
【ccc3.8】虚拟列表
一个简单的虚拟列表，没有任何其他东西。 原理就是向上滚动时，将下面离开屏幕的那一个item塞到上侧来： 主代码仅有两个：ScrollList对应的滚动容器，ScrollListItem对应单项的预制体 当前支持两种：竖向滚动、…...
【23种设计模式】单一职责原则
个人主页：金鳞踏雨 个人简介：大家好，我是金鳞，一个初出茅庐的Java小白 目前状况：22届普通本科毕业生，几经波折了，现在任职于一家国内大型知名日化公司，从事Java开发工作 我的博客&am…...
DNS入门学习：什么是TTL值？如何设置合适的TTL值？
TTL值是域名解析中的一个重要参数，TTL值设置的合理与否对于域名解析的效率和准确性有着非常重要的影响，因此对于网站管理者而言，了解什么是TTL值以及如何设置合理的TTL值对于做好域名解析管理，确保网站的安全稳定运行至关重要。 …...
ilr normalize isometric log-ratio transformation
visium_heart/st_snRNAseq/05_colocalization/create_niches_ct.R at 5b30c7e497e06688a8448afd8d069d2fa70ebcd2 saezlab/visium_heart (github.com) 更多内容，关注微信：生信小博士 The ILR (Isometric Log-Ratio) transformation is used in the anal…...
el表单的简单查询方法
预期效果 实现表单页面根据groupid 、type 、errortype进行数据过滤 实现 第一步，在页面中添加输入或者是下拉框，并且用相应的v-model进行绑定 <div style"display: flex;flex-direction: row;"><el-input style"width: auto…...
【USRP】通信总的分支有哪些
概述 通信是一个广泛的领域，涵盖了许多不同的技术、应用和专业分支。以下是通信领域的一些主要分支： 有线通信：这涉及到利用物理媒介（如电缆、光纤）进行通信。 电信：包括电话、电报和传真服务。宽带&#…...
)
关于服务器网络代理解决方案(1024)
方法一、nginx代理 配置代理服务器 在能够访问外网的服务器上，安装和配置 Nginx。你可以使用包管理器来安装 Nginx，例如： csharpCopy codesudo apt-get install nginx # 对于基于 Debian/Ubuntu 的系统 sudo yum install nginx # 对于基于 C…...
Linux下 /etc/shadow内容详解
/etc/shadow 文件，用于存储 Linux 系统中用户的密码信息，又称为“影子文件”。 前面介绍了 /etc/passwd 文件，由于该文件允许所有用户读取，易导致用户密码泄露，因此 Linux 系统将用户的密码信息从 /etc/passwd 文件中…...
Go学习第二章——变量与数据类型
Go变量与数据类型 1 变量1.1 变量概念1.2 变量的使用步骤1.3 变量的注意事项1.4 ""的使用 2 数据类型介绍3 整数类型3.1 有符号整数类型3.2 无符号整数类型3.3 其他整数类型3.4 整型的使用细节 4 小数类型/浮点型4.1 浮点型的分类4.2 简单使用 5 字符类型5.1 字符类型…...
【剑指Offer】：循环有序列表的插入（涉及链表的知识）
给定循环单调非递减列表中的一个点，写一个函数向这个列表中插入一个新元素 insertVal ，使这个列表仍然是循环升序的 给定的可以是这个列表中任意一个顶点的指针，并不一定是这个列表中最小元素的指针 如果有多个满足条件的插入位置，…...
【Django 04】Django-DRF（ModelViewSet）
DRF是什么？ ModelViewSet 是 Django REST framework 提供的一个视图集类，它封装了常见的模型操作方法。 模型类提供了默认的增删改查功能。 它继承自 GenericViewSet、ListModelMixin、RetrieveModelMixin、CreateModelMixin、UpdateModelMixin、Dest…...
UE5游戏逆向实战：用FModel提取.pak文件中的3D模型（附Dumper-7避坑指南）
UE5游戏逆向实战：用FModel提取.pak文件中的3D模型（附Dumper-7避坑指南） 在虚幻引擎5（UE5）游戏开发与逆向工程领域，资源提取始终是开发者与爱好者关注的核心技能。随着引擎版本迭代，传统的.pak文…...
RMSNorm：深度学习归一化技术的革新与实践
1. 从LayerNorm到RMSNorm：归一化技术的进化之路 第一次在Transformer模型里看到RMSNorm这个名词时，我正对着训练日志里暴涨的GPU内存使用率发愁。作为LayerNorm的"轻量版"替代品，RMSNorm用一行数学公式就解决了困扰我多时的显存问题…...
OpenClaw隐私保护方案：千问3.5-35B-A3B-FP8本地化数据处理实践
OpenClaw隐私保护方案：千问3.5-35B-A3B-FP8本地化数据处理实践 1. 为什么需要全链路隐私保护 去年我帮一位医生朋友整理病历资料时，突然意识到一个问题：当AI助手能读取患者检查报告、化验单甚至影像资料时，如何确保这些敏感信息…...
烦恼：手把手带你用Mamba搭建一个长文本摘要Demo){kind=spacer}
告别Transformer的O(n²)烦恼：手把手带你用Mamba搭建一个长文本摘要Demo
突破长文本处理瓶颈：基于Mamba的高效摘要系统实战指南 当面对动辄数万字的学术论文、企业年报或用户反馈文档时，传统Transformer模型的内存消耗会随着文本长度呈平方级增长。我曾在一个金融数据分析项目中亲历过这种困境——当输入文档超过5000字时&…...
用Go搞定微信扫码登录：一个后端接口+一个回调，附完整可运行代码
极简Go实现微信扫码登录：两个接口搞定全流程 每次看到新项目要接入微信登录就头疼？文档翻来覆去看不明白？其实用Go实现微信扫码登录，核心代码不超过200行。今天我们就用最粗暴的方式，把微信OAuth2.0登录简化为两个接口…...
YOLO系列算法改进 | C2PSA改进篇 | 融合CAFR跨光谱注意力特征细化模块 | 以极低计算代价增强多光谱特征判别性，突破复杂光照与小目标检测瓶颈 | AAAI 2026
0. 前言 本文介绍CAFR（Cross-spectral Attention Feature Refinement）跨光谱注意力特征细化模块，并将其集成到ultralytics最新发布的YOLO26目标检测算法中，构建C2PSA_CAFR创新模块。CAFR是一种基于跨光谱交叉注意力的轻量级特征细化机制，通过显式的对象感知线索引导多光谱…...
大模型转型实战指南：从入门到求职，避坑全攻略
这两年，大模型技术彻底打破行业壁垒，从科研领域的专属议题，变成后端、测试、运维乃至跨行者的职业新选项，更是不少人职业转型的核心方向。 日常对接学员和行业朋友时，类似的疑问反复出现： “我做测试/运维…...
强制脑机接口：某公司用神经监测防员工摸鱼
在科技伦理与管理方式交织的灰色地带，一则关于某公司计划引入脑机接口技术用于监测员工注意力、防止“摸鱼”的传闻，正在引发轩然大波。这并非科幻电影中的场景，而是随着神经技术快速商业化，正悄然逼近的现实可能。对于身处科技行…...
终极免费指南：如何一键下载国家中小学智慧教育平台电子课本PDF文件
终极免费指南：如何一键下载国家中小学智慧教育平台电子课本PDF文件 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具，帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载，让您更方便地获取课本内容。…...
Windows 11系统臃肿卡顿？Win11Debloat高效优化工具让系统重获新生
Windows 11系统臃肿卡顿？Win11Debloat高效优化工具让系统重获新生 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declu…...