使用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…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。 不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序（Program） 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序，比如我们使用QQ，就启动了一个进程，操作系统就会为该进程分配内存…...
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分： 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...