console
var fold_tmp = ''; var didc_fold_text = document.getElementById('didc_fold_text1677224416926'); var didc_fold_all = document.getElementById('didc_fold_all1677224416926'); var didc_fold_button = document.getElementById('didc_fold_button1677224416926'); var didc_fold = document.getElementById('didc_fold1677224416926'); didc_fold_text.contenteditable = 'false'; didc_fold_all.height = '200px'; didc_fold1677224416926 = function () { if (fold_tmp == '') { didc_fold_all.style.height = 'auto'; didc_fold_button.innerHTML = '收起段落'; fold_tmp = 2; } else if (fold_tmp == '2') { didc_fold_all.style.height = '200px'; didc_fold_button.innerHTML = '展开全部'; fold_tmp = '' }; }
<p>
</p>
<div name="didc_fold_all" id="didc_fold_all1677224416926" style="width:100%;height:auto;min-height:200px;background-color:##efefef;position: relative;overflow:hidden;" contenteditable="false">
<div id="didc_fold_text1677224416926" style="margin:20px" contenteditable="true">
<div>
<p style="white-space: normal;">
2023-02-19 12:23:44修复图幕预览自动排序问题
</p>
<p style="white-space: normal;">
2023-02-20 14:58:39修复因为设置了跳播功能，但其不会在非阅读模式下生效问题。
</p>
<p style="white-space: normal;">
2023-02-20 21:32:40添加了橡皮擦功能。
</p>
<p style="white-space: normal;">
2023-02-2109:47:01修复反馈问题<a href="http://www.ofso.cn/houtai/mysite-news-edit.asp?id=434&name=ofso#1" target="_self" _href="#1">1<a name="打开图幕未到时间"></a></a>
</p>
<p style="white-space: normal;">
<img src="http://www.ofso.cn/houtai/ueditor/asp/upload/image/20230221/16769481298176512.png" title="image.png" _src="/houtai/ueditor/asp/upload/image/20230221/16769481298176512.png" alt="image.png" width="480" height="115" style="width: 480px; height: 114.752px;"/>
</p>
<p style="white-space: normal;">
<br/>
</p>
<p style="white-space: normal;">
「暂停—停止
</p>
<p style="white-space: normal;">
先启动——1秒后判断暂停状态
</p>
<p style="white-space: normal;">
∟其他—继续
</p>
<hr style="white-space: normal;"/>
<p style="white-space: normal;">
2023-02-2319:26:51修复撤销、重做存在的问题。
</p>
<p style="white-space: normal;">
2023-02-2113:42:34<a href="http://www.ofso.cn/houtai/mysite-news-edit.asp?id=434&name=ofso#3" target="_self" _href="#3">3</a>问题进度
</p>
<p style="white-space: normal;">
<a href="https://www.bilibili.com/video/BV1kv4y1D7uS?t=1258.2&p=27" target="_blank" _href="https://www.bilibili.com/video/BV1kv4y1D7uS?t=1258.2&p=27" textvalue="橡皮擦的对应方案">橡皮擦的对应方案</a>
</p>
<p style="white-space: normal;">
<a href="https://www.bilibili.com/video/BV1HV4y137er/?spm_id_from=333.337.search-card.all.click&vd_source=38395ad4185d6cfb55c1a49fdb5008b7" target="_blank" _href="https://www.bilibili.com/video/BV1HV4y137er/?spm_id_from=333.337.search-card.all.click&vd_source=38395ad4185d6cfb55c1a49fdb5008b7" textvalue="js实现canvas的撤销与恢复_哔哩哔哩_bilibili">js实现canvas的撤销与恢复_哔哩哔哩_bilibili</a>
</p>
<p style="white-space: normal;">
方案2：<a href="https://jsrun.net/B3cKp/edit">canvas实现画笔和橡皮切换 - JSRUN.NET</a>
</p>
<p style="white-space: normal;">
分析过程2023-02-2317:25:57
</p>
<p style="white-space: normal;">
<img src="http://www.ofso.cn/houtai/ueditor/asp/upload/image/20230223/16771441441058744.png" title="image.png" _src="/houtai/ueditor/asp/upload/image/20230223/16771441441058744.png" alt="image.png" data-original="/houtai/ueditor/asp/upload/image/20230223/16771441441058744.png" width="967" height="612" border="0" vspace="0" style="width: 967px; height: 612px;"/><br/>
</p>
<p style="white-space: normal;">
完成修复<a name="canvas撤销、清除、重做之间存在问题"></a>2023-02-2319:25:06<a name="4参考"></a>
</p>
<p style="white-space: normal;">
<img src="http://www.ofso.cn/houtai/ueditor/asp/upload/image/20230223/16771511141551481.png" title="image.png" _src="/houtai/ueditor/asp/upload/image/20230223/16771511141551481.png" alt="image.png" data-original="/houtai/ueditor/asp/upload/image/20230223/16771511141551481.png" water-single="1" watermark-txt="撤销/重做模块全部修复" watermark-alpha="0.8" width="967" height="460" border="0" vspace="0" style="width: 967px; height: 460px;"/>
</p>
<p style="white-space: normal;">
方案1（不可行）
</p>
<p style="white-space: normal;">
根本原因：globalCompositeOperation切换的问题
</p>
<p style="white-space: normal;">
问题分析
</p>
<p style="white-space: normal;">
初始值：橡皮/画笔按键
</p>
<div courier="" font-size:="" line-height:="" white-space:="" style="white-space: normal; color: rgb(56, 56, 56); background-color: rgb(243, 245, 246);">
<div>
<span style="color: rgb(161, 81, 210);">var</span> <span style="color: rgb(39, 149, 238);">tmp</span><span style="color: rgb(108, 113, 196);">=</span><span style="color: rgb(36, 157, 127);">""</span> //定义一个空值
</div>
<div>
<span style="color: rgb(161, 81, 210);">var</span> <span style="color: rgb(39, 149, 238);">type</span><span style="color: rgb(108, 113, 196);">=</span><span style="color: rgb(36, 157, 127);">"compositeOperation"//定义一个<span style="color: rgb(255, 0, 0);">全局type</span>，初始globalCompositeOperation</span>
</div>
<div>
<span style="color: rgb(39, 149, 238);">didc_sketchpad</span><span style="color: rgb(108, 113, 196);">.</span><span style="color: rgb(39, 149, 238);">prototype</span><span style="color: rgb(108, 113, 196);">.</span><span style="color: rgb(39, 149, 238);">eraser</span><span style="color: rgb(108, 113, 196);">=</span> <span style="color: rgb(161, 81, 210);">function</span><span style="color: rgb(108, 113, 196);">()</span> <span style="color: rgb(108, 113, 196);">{//点击橡皮</span>
</div>
<div>
<span style="color: rgb(39, 149, 238);">document</span><span style="color: rgb(108, 113, 196);">.</span><span style="color: rgb(39, 149, 238);">getElementById</span><span style="color: rgb(108, 113, 196);">(</span><span style="color: rgb(36, 157, 127);">"eraser"</span><span style="color: rgb(108, 113, 196);">).</span><span style="color: rgb(39, 149, 238);">innerHTML</span><span style="color: rgb(108, 113, 196);">=</span><span style="color: rgb(36, 157, 127);">"画笔"//橡皮更换为画笔</span>
</div>
<p>
<span style="color: rgb(161, 81, 210);">if</span><span style="color: rgb(108, 113, 196);">(</span><span style="color: rgb(39, 149, 238);">tmp</span><span style="color: rgb(108, 113, 196);">==</span><span style="color: rgb(36, 157, 127);">""</span><span style="color: rgb(108, 113, 196);">){</span><span style="color: rgb(39, 149, 238);">type</span><span style="color: rgb(108, 113, 196);">=</span><span style="color: rgb(36, 157, 127);">"destination-out"</span><span style="color: rgb(108, 113, 196);">;</span><span style="color: rgb(39, 149, 238);">tmp</span><span style="color: rgb(108, 113, 196);">=</span><span style="color: rgb(36, 157, 127);">"2"//判断空值为空时，<span courier="" font-size:="" white-space:="" background-color:="">globalCompositeOperation=destination-out，设置空值为2</span></span>
</p>
<p>
<span style="color: rgb(108, 113, 196);">}</span><span style="color: rgb(161, 81, 210);">else</span> <span style="color: rgb(161, 81, 210);">if</span><span style="color: rgb(108, 113, 196);">(</span><span style="color: rgb(39, 149, 238);">tmp</span><span style="color: rgb(108, 113, 196);">==</span><span style="color: rgb(36, 157, 127);">"2"</span><span style="color: rgb(108, 113, 196);">){<span courier="" font-size:="" white-space:="" background-color:="" style="color: rgb(36, 157, 127);">//判断空值为2时，globalCompositeOperation=<span courier="" font-size:="" white-space:="" background-color:="">source-over，空值为空</span></span></span>
</p>
<div>
<span style="color: rgb(39, 149, 238);">document</span><span style="color: rgb(108, 113, 196);">.</span><span style="color: rgb(39, 149, 238);">getElementById</span><span style="color: rgb(108, 113, 196);">(</span><span style="color: rgb(36, 157, 127);">"eraser"</span><span style="color: rgb(108, 113, 196);">).</span><span style="color: rgb(39, 149, 238);">innerHTML</span><span style="color: rgb(108, 113, 196);">=</span><span style="color: rgb(36, 157, 127);">"橡皮"</span> //画笔更换为橡皮
</div>
<div>
<span style="color: rgb(39, 149, 238);">type</span><span style="color: rgb(108, 113, 196);">=</span><span style="color: rgb(36, 157, 127);">"source-over"</span><span style="color: rgb(108, 113, 196);">;</span><span style="color: rgb(39, 149, 238);">tmp</span><span style="color: rgb(108, 113, 196);">=</span><span style="color: rgb(36, 157, 127);">""</span><span style="color: rgb(108, 113, 196);">}//</span>
</div>
<div>
<span style="color: rgb(108, 113, 196);">};</span>
</div>
</div>
<p style="white-space: normal;">
<img src="http://www.ofso.cn/houtai/ueditor/asp/upload/image/20230221/16769803032225904.png" title="image.png" _src="/houtai/ueditor/asp/upload/image/20230221/16769803032225904.png" alt="image.png" width="286" height="174" data-original="/houtai/ueditor/asp/upload/image/20230221/16769803032225904.png" border="0" vspace="0" style="width: 286px; height: 174px;"/>
</p>
<p style="white-space: normal;">
当橡皮模式时：撤销（undo）操作，<span courier="" font-size:="" white-space:="" background-color:="" style="color: rgb(36, 157, 127);">globalCompositeOperation=</span><span courier="" font-size:="" background-color:="" white-space:="" color:="">destination-out，</span>在这种模式下会清空整个画布
</p>
<p style="white-space: normal;">
重做（redo）操作，<span courier="" font-size:="" background-color:="" style="color: rgb(36, 157, 127);">globalCompositeOperation=</span><span courier="" font-size:="" background-color:="" white-space:="" color:="">destination-out，</span>同上效果
</p>
<p style="white-space: normal;">
当画笔模式时：撤销（undo）操作，<span courier="" font-size:="" background-color:="" style="color: rgb(36, 157, 127);">globalCompositeOperation=</span><span courier="" font-size:="" background-color:="" white-space:="" color:=""><span courier="" font-size:="" white-space:="" background-color:="">source-over</span>，</span>可以撤销
</p>
<p style="white-space: normal;">
重做（redo）操作，<span courier="" font-size:="" background-color:="" style="color: rgb(36, 157, 127);">globalCompositeOperation=</span><span courier="" font-size:="" background-color:="" white-space:="" color:=""><span courier="" font-size:="" white-space:="" background-color:="" style="color: rgb(255, 0, 0);">source-over</span>，</span>重绘回来的笔迹以叠加上层模式，不再具有橡皮的效果。
</p>
<p style="white-space: normal;">
<img src="http://www.ofso.cn/houtai/ueditor/asp/upload/image/20230221/16769812298611433.gif" title="之所以文化" _src="/houtai/ueditor/asp/upload/image/20230221/16769812298611433.gif" alt="之所以文化" width="523" height="456" border="0" vspace="0" style="border: 0px; margin: 10px auto 0px; padding: 0px; display: block; width: 523px; height: 456px;"/>
</p>
<p style="white-space: normal;">
总结:
</p>
<p style="white-space: normal;">
所以要在橡皮和画笔模式：撤销时<span courier="" font-size:="" background-color:="" style="color: rgb(36, 157, 127);">globalCompositeOperation=</span><span courier="" font-size:="" background-color:="" white-space:="" color:="">source-over</span>
</p>
<p style="white-space: normal;">
重做时<span courier="" font-size:="" background-color:="" style="color: rgb(36, 157, 127);">globalCompositeOperation=</span><span courier="" font-size:="" background-color:="" white-space:="" color:="">destination-out</span>
</p>
<p style="white-space: normal;">
猜想这样橡皮才会起作用，也不至于会撤销清除全屏，重做出现实线。
</p>
<p style="white-space: normal;">
<img src="http://www.ofso.cn/houtai/ueditor/asp/upload/image/20230221/16769815539808806.png" title="image.png" _src="/houtai/ueditor/asp/upload/image/20230221/16769815539808806.png" alt="image.png" width="266" height="220" data-original="/houtai/ueditor/asp/upload/image/20230221/16769815539808806.png" border="0" vspace="0" style="width: 266px; height: 220px;"/>
</p>
<p style="white-space: normal;">
橡皮模式
</p>
<p style="white-space: normal;">
<img src="http://www.ofso.cn/houtai/ueditor/asp/upload/image/20230221/16769822902923536.gif" title="之所以文化" _src="/houtai/ueditor/asp/upload/image/20230221/16769822902923536.gif" alt="之所以文化" width="523" height="456" border="0" vspace="0" style="border: 0px; margin: 10px auto 0px; padding: 0px; display: block; width: 523px; height: 456px;"/>
</p>
<p style="white-space: normal;">
画笔模式
</p>
<p style="white-space: normal;">
<img src="http://www.ofso.cn/houtai/ueditor/asp/upload/image/20230221/16769823738943358.gif" title="之所以文化" _src="/houtai/ueditor/asp/upload/image/20230221/16769823738943358.gif" alt="之所以文化" width="523" height="456" border="0" vspace="0" style="border: 0px; margin: 10px auto 0px; padding: 0px; display: block; width: 523px; height: 456px;"/>
</p>
<p style="white-space: normal;">
分析：无论橡皮还是画笔模式先是就将叠加红色和独立红色变成黑色，然后才能撤销，将撤销改为<span sf="" pro="" pingfang="" font-size:="" white-space:="" background-color:="">lighte目标+原图像，颜色可能跟初始化有关先不考虑，这样橡皮重做就能够实现了，进一步加一个模式判断。</span>
</p>
<p style="white-space: normal;"></p>
<p style="white-space: normal;">
<span style="color: rgb(216, 216, 216);">参考：</span>
</p>
<p style="white-space: normal;">
<img src="http://www.ofso.cn/houtai/ueditor/asp/upload/image/20230221/16769827611229856.png" title="image.png" _src="/houtai/ueditor/asp/upload/image/20230221/16769827611229856.png" alt="image.png" width="475" height="269" data-original="/houtai/ueditor/asp/upload/image/20230221/16769827611229856.png" border="0" vspace="0" style="width: 475px; height: 269.245px;"/>
</p>
<p style="white-space: normal;">
canvasclearRect():<a href="https://www.bilibili.com/video/BV1Er4y117Hs?t=832.4&p=3" target="_blank" _href="https://www.bilibili.com/video/BV1Er4y117Hs?t=832.4&p=3" textvalue="https://www.bilibili.com/video/BV1Er4y117Hs?t=832.4&p=3">https://www.bilibili.com/video/BV1Er4y117Hs?t=832.4&p=3</a><br/>
</p>
<p style="white-space: normal;">
这个是使用的canvas代码对应基本功能吻合的视频教程：<a href="https://www.bilibili.com/video/BV1kv4y1D7uS?p=27&vd_source=38395ad4185d6cfb55c1a49fdb5008b7" target="_blank" _href="https://www.bilibili.com/video/BV1kv4y1D7uS?p=27&vd_source=38395ad4185d6cfb55c1a49fdb5008b7" textvalue="27-canvas实现在线画板_哔哩哔哩_bilibili">27-canvas实现在线画板_哔哩哔哩_bilibili</a>
</p>
<p style="white-space: normal;">
<a href="https://www.bilibili.com/video/BV1QU4y1s7sk/?spm_id_from=333.337.search-card.all.click&vd_source=38395ad4185d6cfb55c1a49fdb5008b7" style="color: rgb(127, 127, 127);">canvas可视化操作-拖拽、放缩、移动_哔哩哔哩_bilibili</a>
</p>
<p style="white-space: normal;">
<a href="https://www.bilibili.com/video/BV1Er4y117Hs/?spm_id_from=333.337.search-card.all.click&vd_source=38395ad4185d6cfb55c1a49fdb5008b7" style="color: rgb(127, 127, 127);">这可能是B站讲的最好的canvas教程，8小时打通canvas全套教程丨2021最新版，前端后台管理系统，图表，各种特效制作必学_哔哩哔哩_bilibili</a>
</p>
<p style="white-space: normal;">
<a href="https://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp" target="_blank" _href="https://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp" textvalue="https://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp" style="color: rgb(127, 127, 127);">https://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp</a>
</p>
<p style="white-space: normal;">
<span style="color: rgb(127, 127, 127);">globalCompositeOperation</span>
</p>
<p style="white-space: normal;">
<a href="https://www.656463.com/wenda/HTML5canvasglobalCompositeOperat_558" target="_blank" _href="https://www.656463.com/wenda/HTML5canvasglobalCompositeOperat_558" textvalue="HTML 5 canvas globalCompositeOperation（橡皮擦）问题(HTML 5 canvas globalCompositeOperation (eraser) issues)_电脑培训 (656463.com)" style="color: rgb(127, 127, 127);">HTML 5 canvas globalCompositeOperation（橡皮擦）问题(HTML 5 canvas globalCompositeOperation (eraser) issues)_电脑培训 (656463.com)</a>
</p>
<p style="white-space: normal;">
<a href="https://www.likecs.com/ask-695367.html" target="_blank" _href="https://www.likecs.com/ask-695367.html" textvalue="如何撤消 HTML5 Canvas 绘图应用程序的橡皮擦操作答案 - 爱码网 (likecs.com)" style="color: rgb(127, 127, 127);">如何撤消 HTML5 Canvas 绘图应用程序的橡皮擦操作答案 - 爱码网 (likecs.com)</a>
</p>
<p style="white-space: normal;">
<a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation" style="color: rgb(127, 127, 127);">CanvasRenderingContext2D.globalCompositeOperation - Web APIs | MDN (mozilla.org)</a>
</p>
</div>
</div>
<div id="didc_fold1677224416926" style="position: absolute;bottom: 0;text-align: center;padding: 2px;background: -webkit-linear-gradient(top,#ffffff00,#ededed) no-repeat;width: 100%;">
<button id="didc_fold_button1677224416926" style="background-color: white;border: 0;border-radius: 30px;padding: 5px 10px 5px 10px;" onclick="didc_fold1677224416926()">展开全部</button>
</div>
</div>
<p>
</p>
<p>
</p>