使用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…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
python打卡day49
知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义 作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题，说是客户的导入文件模版想支持部分导入内容的下拉选，于是我就找了easyexcel官网寻找解决方案，并没有找到合适的方案，没办法只能自己动手并分享出来，针对Java生成Excel下拉菜单时因选项过多导…...
VSCode 使用CMake 构建 Qt 5 窗口程序
首先，目录结构如下图： 运行效果： cmake -B build cmake --build build 运行： windeployqt.exe F:\testQt5\build\Debug\app.exe main.cpp #include "mainwindow.h"#include <QAppli...
【阅读笔记】MemOS: 大语言模型内存增强生成操作系统
核心速览 研究背景 研究问题：这篇文章要解决的问题是当前大型语言模型（LLMs）在处理内存方面的局限性。LLMs虽然在语言感知和生成方面表现出色，但缺乏统一的、结构化的内存架构。现有的方法如检索增强生成（RA…...
AWS vs 阿里云：功能、服务与性能对比指南
在云计算领域，Amazon Web Services (AWS) 和阿里云 (Alibaba Cloud) 是全球领先的提供商，各自在功能范围、服务生态系统、性能表现和适用场景上具有独特优势。基于提供的引用[1]-[5]，我将从功能、服务和性能三个方面进行结构化对比分析&#…...
比特币：固若金汤的数字堡垒与它的四道防线
第一道防线：机密信函——无法破解的哈希加密 将每一笔比特币交易比作一封在堡垒内部传递的机密信函。 解释“哈希”（Hashing）就是一种军事级的加密术（SHA-256），能将信函内容（交易细节…...