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

2024-03-26 19:44
文章标签 恢复 canvas 画图 撤销 历史记录

本文主要是介绍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>

在这里插入图片描述

在这里插入图片描述

总结

踩坑路漫漫长@~@

这篇关于canvas画图历史记录撤销与恢复的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/849650。

相关文章

电脑不小心删除的文件怎么恢复？4个必备恢复方法！

电脑不小心删除的文件怎么恢复？4个必备恢复方法！

“刚刚在对电脑里的某些垃圾文件进行清理时，我一不小心误删了比较重要的数据。这些误删的数据还有机会恢复吗？希望大家帮帮我，非常感谢！” 在这个数字化飞速发展的时代，电脑早已成为我们日常生活和工作中不可或缺的一部分。然而，就像生活中的小插曲一样，有时我们可能会在不经意间犯下一些小错误，比如不小心删除了重要的文件。 当那份文件消失在眼前，仿佛被时间吞噬，我们不禁会心生焦虑。但别担心，就像每个问题
阅读更多...
笔记本电脑屏幕模糊？6招恢复屏幕清晰！

笔记本电脑屏幕模糊？6招恢复屏幕清晰！

在数字化时代的浪潮中，笔记本电脑已成为我们生活、学习和工作中不可或缺的一部分。然而，当那曾经清晰明亮的屏幕逐渐变得模糊不清时，无疑给我们的使用体验蒙上了一层阴影。屏幕模糊不仅影响视觉舒适度，更可能对我们的工作效率和眼睛健康构成威胁。 遇到笔记本电脑屏幕模糊的情况时我们应该如何解决？本文将与大家分享6个简单易懂的解决方法。 方法一：调整Windows分辨率 电脑屏幕模糊显示不清晰怎
阅读更多...
以canvas方式绘制粒子背景效果，感觉还可以

以canvas方式绘制粒子背景效果，感觉还可以

这个是看到项目中别人写好的，感觉这种写法效果还可以，就存留记录下 就是这种的背景效果。如果想改背景颜色可以通过canvas.js文件中的fillStyle值改。 附上demo下载地址。 https://download.csdn.net/download/u012138137/11249872
阅读更多...
适用于 Android 的 几种短信恢复应用程序

适用于 Android 的 几种短信恢复应用程序

Android 设备上的短信丢失可能由于多种原因而丢失，例如意外删除、恢复出厂设置、系统崩溃或病毒攻击。是否有应用程序可以恢复 Android 上已删除的短信？幸运的是，有几款短信恢复应用程序可以扫描您的 Android 手机并从内存或 SIM 卡中检索已删除的短信。 然而，并非所有短信恢复应用程序都是可靠或有效的。有些可能无法恢复消息，有些可能会损坏您的数据，有些甚至可能包含恶意软件或间谍软件
阅读更多...
CesiumJS【Basic】- #008 通过canvas绘制billboard

CesiumJS【Basic】- #008 通过canvas绘制billboard

文章目录 通过canvas绘制billboard1 目标2 实现 通过canvas绘制billboard 1 目标 通过canvas绘制billboard 2 实现 /** @Author: alan.lau* @Date: 2024-06-16 11:15:48* @LastEditTime: 2024-06-16 11:43:02* @LastEditors: al
阅读更多...
Android自定义系列——4.Canvas操作

Android自定义系列——4.Canvas操作

1.画布操作 为什么要有画布操作？ 画布操作可以帮助我们用更加容易理解的方式制作图形。 ⑴位移(translate) translate是坐标系的移动，可以为图形绘制选择一个合适的坐标系。 请注意，位移是基于当前位置移动，而不是每次基于屏幕左上角的(0,0)点移动，如下： // 省略了创建画笔的代码// 在坐标原点绘制一个黑色圆形mPaint.setColor(Color.BLACK);ca
阅读更多...
k8s集群master故障恢复笔记

k8s集群master故障恢复笔记

剔除故障节点 kubectl drain master故障节点 kubectl delete node master故障节点 kubeadm reset rm -rf /etc/kubernetes/manifests mkdir -p /etc/kubernetes/pki/etcd/ 从master其他节点拷 scp /etc/kubernetes/pki/ca.crt ca.k
阅读更多...
myEclipse勿删文件怎么恢复

myEclipse勿删文件怎么恢复

今天码代码的时候项目里有一个jsp文件不小心被删了，又懒得重写，然后发现myEclipse竟然可以恢复被勿删的文件，当然，也仅仅限于最近被删的文件。 具体怎么恢复呢？-------右键点击被删文件所在项目，找到restore from local history，点击打开窗口，找到要恢复的文件，勾选上，然后ok
阅读更多...
Canvas绘制图片和区域

Canvas绘制图片和区域

如何使用Canvas在图片上绘制区域？ 一. 首先，我们需要初始化三个canvas画布（初始化Canvas）   initCanvas() {// 初始化canvas画布let canvasWrap = document.getElementsByClassName("canvas-wrap");this.wrapWidth = canvasWrap[0].clientWidth;thi
阅读更多...
硬盘数据恢复软件，推荐5种适合你的方法来恢复硬盘数据

硬盘数据恢复软件，推荐5种适合你的方法来恢复硬盘数据

硬盘数据恢复软件，作为解决数据丢失问题的关键工具，帮助用户在重要文件丢失时迅速找回数据。本教程介绍5种恢复实用硬盘数据方法，适应不同类型和严重程度的数据损坏情况。 文章摘要： 一. 硬盘数据恢复软件 二. 数据恢复原理 三. 当硬盘有坏道的情况下继续使用硬盘会导致数据无法恢复 四. 数据恢复的多种手段 五. 硬盘数据恢复软件 - 5种恢复方法 六. 正确使用硬盘 七. 数据备份的重要性 八. 总
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2