canvas画图历史记录撤销与恢复

提示：canvas画图历史记录撤销与恢复

文章目录

  • 前言
  • 一、历史记录撤销与恢复
  • 总结

前言

一、历史记录撤销与恢复

test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>canvas跟随鼠标移动画透明线</title><style>div,canvas,img{user-select: none;}.my_canvas,.bg_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}.cf{content: '';display: block;overflow: hidden;clear: both;}.fl{float: left;}.fr{float: right;}.bg_img{width: 674px;height: 495px;background: #ddd;}.img_tools{position: absolute;top: 20px;left: 50%;transform: translateX(-50%);border: 1px solid #eee;border-radius: 64px;height: 64px;line-height: 64px;box-sizing: border-box;padding: 15px 20px 0;}.img_tool{height: 32px;line-height: 32px;color: #000;font-size: 14px;text-align: center;width: 80px;border: 1px solid #ddd;border-radius: 32px;margin-right: 10px;cursor: pointer;}.img_tool_active{color: #409EFF;border: 1px solid #409EFF;}.show_history{position: absolute;bottom:0;left: 50%;transform: translateX(-50%);}.show_history>img{width: 120px;margin-right: 10px;border: 1px solid #eee;border-radius: 4px;}</style>
</head>
<body><div class="bg_img"></div><canvas id="myCanvasBot" class="my_canvas" width="674" height="495"></canvas><canvas id="myCanvasTop" class="my_canvas" width="674" height="495"></canvas><div class="img_tools cf"><div class="img_tool img_tool_active fl" onclick="changeType('curve',this)">涂鸦</div><div class="img_tool fl" onclick="changeType('line',this)">直线</div><div class="img_tool fl" onclick="changeType('rect',this)">矩形</div><div class="img_tool fl" onclick="changeType('ellipse',this)">圆形</div><div class="img_tool fl" onclick="changeType('eraser',this)">橡皮擦</div><div class="img_tool fl" onclick="changeType('revoke',this)">撤销</div><div class="img_tool fl" onclick="changeType('restore',this)">恢复</div></div><div id="showHistory" class="show_history"></div><script>const canvasWidth = 674;const canvasHeight = 495;//底层canvasconst botCan = document.getElementById('myCanvasBot');//顶层canvasconst topCan = document.getElementById('myCanvasTop');//底层画布const botCtx = botCan.getContext('2d');//顶层画布const topCtx = topCan.getContext('2d');topCtx.lineCap = 'round';topCtx.lineJoin = 'round';//鼠标是否按下  是否移动let isDown = false,isMove = false;//鼠标是否在canvas上抬起let isCanUp = false;//需要画图的轨迹let drawPoints = [];//起始点x,ylet startPoint = {x:0,y:0};//图片历史let historyList = [];//空历史historyList.push(new Image())//当前绘画历史indexlet historyIndex = -1;//icon历史// let partHistory = [];//操作类型let drawType = 'curve';//画线宽度const lineWidth = 10;//鼠标按下const mousedown = (e)=>{isDown = true;let x = (e||window.event).offsetX;let y = (e||window.event).offsetY;startPoint = {x,y};drawPoints.push([{x,y}]);topCtx.strokeStyle = 'rgba(255,0,0,0.2)';topCtx.lineWidth = lineWidth;topCtx.beginPath();topCtx.moveTo(x,y);}//鼠标移动const mousemove = (e)=>{let x = (e||window.event).offsetX;let y = (e||window.event).offsetY;if(isDown){isMove = true;switch(drawType){case 'curve':drawCurve(x,y);break;case 'line':drawLine(x,y);break;case 'eraser':drawEraser(x,y);break;case 'rect':drawRect(x,y);break;case 'ellipse':drawEllipse(x,y);break;}}}//鼠标抬起const mouseup = (e)=>{isCanUp = true;if(isDown){// topCan内容画到botCan上topToBot();}}//topCan内容画到botCan上const topToBot = ()=>{//把topCan画布生成图片let img = new Image();img.src = topCan.toDataURL('image/png');img.onload = ()=>{// partHistory.push(img);//添加到botCtx画布botCtx.drawImage(img,0,0);let historyImg = new Image();historyImg.src = botCan.toDataURL('image/png');historyImg.onload = ()=>{//添加到历史记录historyList.push(historyImg);historyIndex = historyList.length - 1;let ele = document.getElementById('showHistory');let html='';for(let i=0;i<historyList.length;i++){if(historyList[i].src)html += `<img src="${historyList[i].src}" alt="">`}ele.innerHTML = html;}//清除topCtx画布topCtx.clearRect(0,0,canvasWidth,canvasHeight);//botCan画完之后，重置canvas的mouseup isCanUpif(isCanUp)isCanUp=false;}drawPoints = [];isDown = false;isMove = false;}//画椭圆形const drawEllipse = (x,y)=>{//清除topCtx画布topCtx.clearRect(0,0,canvasWidth,canvasHeight);topCtx.beginPath();// 椭圆topCtx.ellipse((x+startPoint.x)/2, (y+startPoint.y)/2, Math.abs((x-startPoint.x)/2), Math.abs((y-startPoint.y)/2),0,0, Math.PI*2,true);topCtx.stroke();}//画矩形const drawRect = (x,y)=>{//清除topCtx画布topCtx.clearRect(0,0,canvasWidth,canvasHeight);topCtx.beginPath();// 矩形topCtx.rect(startPoint.x, startPoint.y, x-startPoint.x, y - startPoint.y);topCtx.stroke();}//橡皮擦const drawEraser = (x,y)=>{//橡皮擦圆形半径const radius = lineWidth/2;botCtx.beginPath(); for(let i=0;i<radius*2;i++){//勾股定理高hlet h = Math.abs( radius - i); //i>radius h = i-radius; i<radius  h = radius - i//勾股定理llet l = Math.sqrt(radius*radius -h*h); //矩形高度let rectHeight = 1;//矩形宽度let rectWidth = 2*l;//矩形Xlet rectX = x-l;//矩形Ylet rectY = y-radius + i;botCtx.clearRect(rectX, rectY, rectWidth, rectHeight);}}//画透明度直线const drawLine = (x,y)=>{if(!isDown)return;//清空当前画布内容topCtx.clearRect(0,0,canvasWidth,canvasHeight);//必须每次都beginPath  不然会卡topCtx.beginPath();topCtx.moveTo(startPoint.x,startPoint.y);topCtx.lineTo(x,y);topCtx.stroke();}//画带透明度涂鸦const drawCurve = (x,y)=>{drawPoints.push({x,y});//清空当前画布内容topCtx.clearRect(0,0,canvasWidth,canvasHeight);//必须每次都beginPath  不然会卡topCtx.beginPath();topCtx.moveTo(drawPoints[0].x,drawPoints[0].y);for(let i=1;i<drawPoints.length;i++){topCtx.lineTo(drawPoints[i].x,drawPoints[i].y);}topCtx.stroke();}//切换操作const changeType = (type,that)=>{// if(drawType == type) return;let tools = document.getElementsByClassName('img_tool');for(let i=0;i<tools.length;i++){let ele = tools[i];if(ele.classList.contains('img_tool_active'))ele.classList.remove('img_tool_active'); //ele.removeClassName('img_tool_active');}that.classList.add('img_tool_active');drawType = type;//撤销if(drawType == 'revoke'){if(historyIndex>0){historyIndex--;drawImage(historyList[historyIndex]);}//恢复}else if(drawType == 'restore'){if(historyIndex<historyList.length - 1){historyIndex++;drawImage(historyList[historyIndex]);}}}const drawImage = (img)=>{botCtx.clearRect(0,0,canvasWidth,canvasHeight);botCtx.drawImage(img,0,0);}//canvas添加鼠标事件topCan.addEventListener('mousedown',mousedown);topCan.addEventListener('mousemove',mousemove);topCan.addEventListener('mouseup',mouseup);//全局添加鼠标抬起事件document.addEventListener('mouseup',(e)=>{let x = (e||window.event).offsetX;let y = (e||window.event).offsetY;let classList = (e.target || {}).classList || [];if(classList.contains('img_tool'))return;if(!isCanUp){if(drawType == 'line'){let clientX = topCan.getBoundingClientRect().x;let clientY = topCan.getBoundingClientRect().y;drawLine(x-clientX,y-clientY);}// topCan内容画到botCan上topToBot();}});//全局添加鼠标移动事件document.addEventListener('mousemove',(e)=>{if(isMove)return isMove = false;let x = (e||window.event).offsetX;let y = (e||window.event).offsetY;if(drawType == 'line'){let clientX = topCan.getBoundingClientRect().x;let clientY = topCan.getBoundingClientRect().y;drawLine(x-clientX,y-clientY);}});</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

总结

踩坑路漫漫长@~@

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/288037.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JavaScript混淆工具选择与使用指南

JavaScript混淆工具选择与使用指南

摘要 本文介绍了什么是js混淆工具&#xff0c;以及为什么需要使用js混淆工具。详细解释了js混淆工具的实现原理和作用&#xff0c;探讨了如何选择合适的js混淆工具&#xff0c;列举了几款常用的js混淆工具&#xff0c;并对它们的特点和适用场景进行了分析。最后总结了js混淆工…
阅读更多...
图书推荐|图解Java数据结构与算法：微课视频版

图书推荐|图解Java数据结构与算法：微课视频版

掌握Java数据结构与常见算法&#xff0c;精通Java语言编程 本书内容 《图解Java数据结构与算法&#xff1a;微课视频版》系统、全面地介绍数据结构的基础理论与算法设计&#xff0c;精选数据结构考研习题和各类典型例题进行讲解&#xff0c;案例和课后习题丰富&#xff0c;突出…
阅读更多...
Ubuntu 配置 kubernetes 学习环境，让外部访问 dashboard

Ubuntu 配置 kubernetes 学习环境，让外部访问 dashboard

Ubuntu 配置 kubernetes 学习环境 一、安装 1. minikube 首先下载一下 minikube&#xff0c;这是一个单机版的 k8s&#xff0c;只需要有容器环境就可以轻松启动和学习 k8s。 首先你需要有Docker、QEMU、Hyperkit等其中之一的容器环境&#xff0c;以下使用 docker 进行。 对…
阅读更多...
如何使用CHAT-AI？

如何使用CHAT-AI？

伴随着CHAT-GPT的出现&#xff0c;人们都喜欢上了CHAT-AI。嗯&#xff1f;你还不会用&#xff1f;&#xff01; 教程来喽&#xff01; 首先点这里的 … 点击扩展 接着选择“管理扩展” 点击之后搜索“wetab” 最后你需要注册一个号&#xff0c;然后就可以使用CHAT-AI啦&#x…
阅读更多...
产品推荐 | 基于 ALINX XILINX ZYNQ-7000 XC7Z020 多网口 FPGA开发板

产品推荐 | 基于 ALINX XILINX ZYNQ-7000 XC7Z020 多网口 FPGA开发板

01、产品概述 此款开发板使用的是Xilinx公司的Zynq 7000系列的芯片&#xff0c;型号为XC7Z020-2CLG484I&#xff0c;5 路千兆以太网接口&#xff0c;支持多网口高速数据交换数据处理存储&#xff0c;视频传输处理以及工业控制等。内核 CPU搭载双核 ARM CORTEX-A9&#xff1b;在…
阅读更多...
大数据Hadoop入门04 ——【HDFS shell操作】

大数据Hadoop入门04 ——【HDFS shell操作】

一、HDSF shell命令行解释说明 1、介绍 命令行界面&#xff08;英语: command-line interface&#xff0c;缩写: CLl)&#xff0c;是指用户通过键盘输入指令&#xff0c;计算机接收到指令后&#xff0c;予以执行一种人际交互方式。Hadoop提供了文件系统的shell命令行客户端:…
阅读更多...
43 带 fixed 列的 el-table 不兼容于 sortablejs

43 带 fixed 列的 el-table 不兼容于 sortablejs

前言 这是一个基于 sortablejs 来实现的 el-table 的拖拽功能的基础实现 然后 这个过程中遇到的一个比较特殊的问题是, 关于 el-table-column 的 fixed 的属性, 对于 sortablejs 这边来定位目标选择列 影响的一个问题 在基础的用例中, 使用 “.el-table__body-wrapper tbo…
阅读更多...
手把手教你绘画原型图：Axure的安装使用

手把手教你绘画原型图：Axure的安装使用

&#x1f341; 作者&#xff1a;知识浅谈&#xff0c;CSDN签约讲师&#xff0c;CSDN博客专家&#xff0c;华为云云享专家&#xff0c;阿里云专家博主 &#x1f4cc; 擅长领域&#xff1a;全栈工程师&#xff0c;大模型&#xff0c;爬虫、ACM算法 &#x1f492; 公众号&#xff…
阅读更多...
并发学习25--多线程 ThreadPoolExecutor

并发学习25--多线程 ThreadPoolExecutor

类图&#xff1a;定义了一些重要的接口和实现类 线程池的几种状态&#xff1a; ThreadPoolExecutor构造方法 1.救急线程 线程池中会有核心线程和救急线程&#xff1b;救急线程数最大线程数-核心线程数。而救急线程会在阻塞队列已经占满的情况下&#xff0c;执行下一个即将要被…
阅读更多...
07、JS实现：用回溯法实现数组全排列的算法(一步一步剖析，很详细)

07、JS实现：用回溯法实现数组全排列的算法(一步一步剖析，很详细)

回溯法实现数组全排列的算法 Ⅰ、回溯法实现数组全排列&#xff1a;1、题目描述&#xff1a;2、解题思路&#xff1a;3、实现代码&#xff1a; Ⅱ、小结&#xff1a; Ⅰ、回溯法实现数组全排列&#xff1a; 1、题目描述&#xff1a; 给定⼀个 没有重复 数字的序列&#xff0c;…
阅读更多...
Kimi 200万字爆火，通义加码1000万，阿里笑而不语

Kimi 200万字爆火，通义加码1000万，阿里笑而不语

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 我怎么感觉Kimi是一个“网红”产品呢?在没有任何预兆情况下&#xff0c;国产AI大模型Kimi突然爆火&#xff0c;最近我在很多平台上看到了Kimi的广告&#xff0c;感觉到处都在吹这个产品。 看见上面的新闻了吧&a…
阅读更多...
使用Spark单机版环境

使用Spark单机版环境

在Spark单机版环境中&#xff0c;可通过多种方式进行实战操作。首先&#xff0c;可使用特定算法或数学软件计算圆周率π&#xff0c;并通过SparkPi工具验证结果。其次&#xff0c;在交互式Scala版或Python版Spark Shell中&#xff0c;可以进行简单的计算、打印九九表等操作&…
阅读更多...
VRAY渲染设置大神参数（建议收藏）

VRAY渲染设置大神参数（建议收藏）

3dmax效果图云渲染平台——渲染100以3ds Max 2024、VR 6.2、CR 11.2等最新版本为基础&#xff0c;兼容fp、acescg等常用插件&#xff0c;同时LUT滤镜等参数也得到了同步支持。注册填邀请码【7788】可领30元礼包和免费渲染券哦~ 公用&#xff1a;输出大小&#xff1a;一般小图50…
阅读更多...
JavaScript进阶5之垃圾回收（计算机组成、解释与编译、JavaScript引擎、垃圾回收、内存管理）、运行机制（浏览器进程分类、浏览器事件循环）

JavaScript进阶5之垃圾回收（计算机组成、解释与编译、JavaScript引擎、垃圾回收、内存管理）、运行机制（浏览器进程分类、浏览器事件循环）

垃圾回收&运行机制 垃圾回收计算机组成解释与编译JavaScript引擎V8引擎 垃圾回收引用计数法标记清除&#xff08;mark-sweep&#xff09;算法 内存管理新生代 运行机制浏览器进程分类&#xff1a;浏览器事件循环宏任务微任务整体流程浏览器事件循环案例一案例二 垃圾回收 …
阅读更多...
SpringBoot中处理校验逻辑的两种方式：Hibernate Validator+全局异常处理

SpringBoot中处理校验逻辑的两种方式：Hibernate Validator+全局异常处理

最近正在开发一个校园管理系统&#xff0c;需要对请求参数进行校验&#xff0c;比如说非空啊、长度限制啊等等&#xff0c;可选的解决方案有两种&#xff1a; 一种是用 Hibernate Validator 来处理一种是用全局异常来处理 两种方式&#xff0c;我们一一来实践体验一下。 一、…
阅读更多...
Oracle Data Guard部署

Oracle Data Guard部署

Oracle的主备DG搭建 1. 修改主机名,同步时间 主库IP&#xff1a;192.168.100.137 备库IP&#xff1a;192.168.100.138配置主机名(主库) Hostname zygjpdb vim /etc/hosts 192.168.100.137 zygjpdb 192.168.100.138 zygjsdbvim /etc/sysconfig/network HOSTNAMEzygjpdb ------…
阅读更多...
TransformControls 是 Three.js 中的一个类，用于在网页中进行 3D 场景中物体的交互式操作。

TransformControls 是 Three.js 中的一个类，用于在网页中进行 3D 场景中物体的交互式操作。

demo案例 TransformControls 是 Three.js 中的一个类&#xff0c;用于在网页中进行 3D 场景中物体的交互式操作。让我们来详细讲解它的输入参数、输出、属性和方法&#xff1a; 输入参数&#xff1a; TransformControls 构造函数通常接受两个参数&#xff1a; camera&#…
阅读更多...
YAPI接口自动鉴权功能部署详解

YAPI接口自动鉴权功能部署详解

安装准备 以下操作&#xff0c;默认要求自己部署过yapi&#xff0c;最好是部署过yapi二次开发环境。 无论是选择在线安装或者是本地安装&#xff0c;都需要安装client工具。 1、yapi-cli&#xff1a;npm install yapi-cli –g&#xff0c; 2、安装后将文件夹nodejs/node_gl…
阅读更多...
JavaScript 打印教程（第二部分）设置编码

JavaScript 打印教程（第二部分）设置编码

JavaScript 打印教程&#xff08;第二部分&#xff09;设置编码 在进行文本打印时&#xff0c;尤其是涉及到中文或其他特殊字符时&#xff0c;正确的编码设置是非常重要的。不同的打印机支持不同的指令集&#xff0c;因此了解并使用适合您打印机的指令集是关键。本篇教程继续使…
阅读更多...
使用 python 拆分 excel 文件

使用 python 拆分 excel 文件

文章目录 1、安装虚拟环境&#xff08;在特定文件夹内&#xff09;2、脚本 split.sh3、运行脚本&#xff08;在特定文件夹内&#xff09;4、结果 1、安装虚拟环境&#xff08;在特定文件夹内&#xff09; brew install python3 xcode-select --install python3 -m venv my_pan…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023