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

使用canvas做了一个最简单的网页版画板，5分钟学会

news 2025/6/26 14:47:49

画板实现的效果：可以切换画笔的粗细，颜色，还可以使用橡皮擦，还可以清除画布，然后将画的内容保存下载成一张图片：

具体用到的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分钟学会

画板实现的效果&#xff1a;可以切换画笔的粗细&#xff0c;颜色&#xff0c;还可以使用橡皮擦&#xff0c;还可以清除画布&#xff0c;然后将画的内容保存下载成一张图片&#xff1a; 具体用到的canvas功能有&#xff1a;画笔的粗细调整lineWidth&#xff0c;开始一个新的画笔…...

编程日记 2023/10/24 20:03:42

自组织映射Python实现

自组织映射&#xff08;Self-organizing map&#xff09;Python实现。仅供学习。 #!/usr/bin/env python3""" Self-organizing map """from math import expimport toolzimport numpy as np import numpy.linalg as LAfrom sklearn.base import…...

编程日记 2023/10/24 20:02:41

如何避免阿里云对象储存OSS被盗刷

网站app图片的云端存储离不开对象存储oss,而最难为的问题就是app做的出名了&#xff0c;少不了同行的攻击&#xff0c;包含ddos&#xff0c;cc攻击以及oss外链被盗刷&#xff01; 防盗链功能通过设置Referer白名单以及是否允许空Referer&#xff0c;限制仅白名单中的域名可以访…...

编程日记 2023/10/24 20:01:40

产品研发团队协作神器！10款提效工具大盘点！

在如今科技驱动的时代&#xff0c;产品研发团队面临着前所未有的竞争压力和不断变化的市场需求。为了在这个激烈的环境中脱颖而出&#xff0c;团队需要高效协作并充分利用先进的工具来提高生产力和创新能力。 本文将为你盘点产品研发团队协作必备的10个提效工具&#xff0c;这…...

编程日记 2023/10/24 20:00:39

LSTM 与 GRU

RNN无法处理长距离依赖问题&#xff0c;通俗点就是不能处理一些较长的序列数据&#xff0c;那么今天就来介绍一下两个能处理长距离依赖问题地RNN变种结构&#xff0c;LSTM和GRU。 1. LSTM&#xff08;Long short-term memory&#xff09; 1.1 LSTM结构 上左图是普通RNN结构图…...

编程日记 2023/10/24 19:59:38

代码评审CheckList

代码评审CheckList Author: histonevonzohomail.com Date: 2023/10/24 此博客为笔者在工作中总结的经验&#xff0c;适用于笔者所在的工作&#xff0c;具体情况还需各位自己分析以下的分类并不规范&#xff0c;有好的建议可以给我Email值此1024祝全世界的开发者&#xff1a;天天…...

编程日记 2023/10/24 19:58:37

[尚硅谷React笔记]——第5章 React 路由

目录&#xff1a; 对SPA应用的理解对路由的理解前端路由原理路由的基本使用路由组件与一般组件NavLink的使用封装NavLink组件Switch的使用解决样式丢失问题路由的模糊匹配与严格匹配Redirect的使用嵌套路由向路由组件传递params参数向路由组件传递search参数.向路由组件传递st…...

编程日记 2023/10/24 19:56:35

如何去掉不够优雅的IF-ELSE

不够优雅的IF-ELSE&#xff1a; 在一个方法中根据两个参数的不同值组合来返回四种可能的类型&#xff0c;你可以使用条件语句&#xff0c;例如 if-else 语句或 switch 语句&#xff0c;来实现这个逻辑。以下是一个示例&#xff0c;假设你有两个参数 param1 和 param2&#xff…...

编程日记 2023/10/24 19:55:34

Python中defaultdict的使用

文章目录 Python 中的 defaultdict 与 dictPython 中的 defaultdict Python 中 defaultdict 的有用函数Python 中的 defaultdict.clear()Python 中的 defaultdict.copy()Python 中的 defaultdict.default_factory()Python 中的 defaultdict.get(key, default value) 今天的文章…...

编程日记 2023/10/24 19:54:33

【ccc3.8】虚拟列表

一个简单的虚拟列表&#xff0c;没有任何其他东西。 原理就是向上滚动时&#xff0c;将下面离开屏幕的那一个item塞到上侧来&#xff1a; 主代码仅有两个&#xff1a;ScrollList对应的滚动容器&#xff0c;ScrollListItem对应单项的预制体 当前支持两种&#xff1a;竖向滚动、…...

编程日记 2023/10/24 19:53:32

【23种设计模式】单一职责原则

个人主页&#xff1a;金鳞踏雨 个人简介&#xff1a;大家好&#xff0c;我是金鳞&#xff0c;一个初出茅庐的Java小白 目前状况&#xff1a;22届普通本科毕业生&#xff0c;几经波折了&#xff0c;现在任职于一家国内大型知名日化公司&#xff0c;从事Java开发工作 我的博客&am…...

编程日记 2023/10/24 19:52:31

DNS入门学习：什么是TTL值？如何设置合适的TTL值？

TTL值是域名解析中的一个重要参数&#xff0c;TTL值设置的合理与否对于域名解析的效率和准确性有着非常重要的影响&#xff0c;因此对于网站管理者而言&#xff0c;了解什么是TTL值以及如何设置合理的TTL值对于做好域名解析管理&#xff0c;确保网站的安全稳定运行至关重要。 …...

编程日记 2023/10/24 19:51:29

ilr normalize isometric log-ratio transformation

visium_heart/st_snRNAseq/05_colocalization/create_niches_ct.R at 5b30c7e497e06688a8448afd8d069d2fa70ebcd2 saezlab/visium_heart (github.com) 更多内容&#xff0c;关注微信&#xff1a;生信小博士 The ILR (Isometric Log-Ratio) transformation is used in the anal…...

编程日记 2023/10/24 19:50:28

el表单的简单查询方法

预期效果 实现表单页面根据groupid 、type 、errortype进行数据过滤 实现 第一步&#xff0c;在页面中添加输入或者是下拉框&#xff0c;并且用相应的v-model进行绑定 <div style"display: flex;flex-direction: row;"><el-input style"width: auto…...

编程日记 2023/10/24 19:49:27

【USRP】通信总的分支有哪些

概述 通信是一个广泛的领域&#xff0c;涵盖了许多不同的技术、应用和专业分支。以下是通信领域的一些主要分支&#xff1a; 有线通信&#xff1a;这涉及到利用物理媒介&#xff08;如电缆、光纤&#xff09;进行通信。 电信&#xff1a;包括电话、电报和传真服务。宽带&#…...

编程日记 2023/10/24 19:48:25

关于服务器网络代理解决方案(1024)

方法一、nginx代理 配置代理服务器 在能够访问外网的服务器上&#xff0c;安装和配置 Nginx。你可以使用包管理器来安装 Nginx&#xff0c;例如&#xff1a; csharpCopy codesudo apt-get install nginx # 对于基于 Debian/Ubuntu 的系统 sudo yum install nginx # 对于基于 C…...

编程日记 2023/10/24 19:47:24

Linux下 /etc/shadow内容详解

/etc/shadow 文件&#xff0c;用于存储 Linux 系统中用户的密码信息&#xff0c;又称为“影子文件”。 前面介绍了 /etc/passwd 文件&#xff0c;由于该文件允许所有用户读取&#xff0c;易导致用户密码泄露&#xff0c;因此 Linux 系统将用户的密码信息从 /etc/passwd 文件中…...

编程日记 2023/10/24 19:46:23

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 字符类型…...

编程日记 2023/10/24 19:45:22

【剑指Offer】：循环有序列表的插入（涉及链表的知识）

给定循环单调非递减列表中的一个点&#xff0c;写一个函数向这个列表中插入一个新元素 insertVal &#xff0c;使这个列表仍然是循环升序的 给定的可以是这个列表中任意一个顶点的指针&#xff0c;并不一定是这个列表中最小元素的指针 如果有多个满足条件的插入位置&#xff0c…...

编程日记 2023/10/24 19:43:18

【Django 04】Django-DRF（ModelViewSet）

DRF是什么&#xff1f; ModelViewSet 是 Django REST framework 提供的一个视图集类&#xff0c;它封装了常见的模型操作方法。 模型类提供了默认的增删改查功能。 它继承自 GenericViewSet、ListModelMixin、RetrieveModelMixin、CreateModelMixin、UpdateModelMixin、Dest…...

编程日记 2023/10/24 19:42:16

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/6/21 5:42:11

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/6/25 22:35:42

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/6/26 1:51:25

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/6/24 1:43:46

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/6/24 15:27:37

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2025/6/22 11:10:34

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2025/6/15 19:46:06

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/6/26 7:27:00

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2025/6/21 0:08:36

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...

编程新知 2025/6/26 6:20:09