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;
        //底层canvas
        const botCan = document.getElementById('myCanvasBot');
        //顶层canvas
        const 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,y
        let startPoint = {
            x:0,
            y:0
        };
        //图片历史
        let historyList = [];
        //空历史
        historyList.push(new Image())
        //当前绘画历史index
        let 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 isCanUp
                if(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++){
                //勾股定理高h
                let h = Math.abs( radius - i); //i>radius h = i-radius; i<radius  h = radius - i
                //勾股定理l
                let l = Math.sqrt(radius*radius -h*h); 
                //矩形高度
                let rectHeight = 1;
                 //矩形宽度
                let rectWidth = 2*l;
                //矩形X
                let rectX = x-l;
                //矩形Y
                let 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画图历史记录撤销与恢复,canvas涂鸦插件,javascript,前端,html

canvas画图历史记录撤销与恢复,canvas涂鸦插件,javascript,前端,html

总结

踩坑路漫漫长@~@文章来源地址https://www.toymoban.com/news/detail-843904.html

到了这里,关于canvas画图历史记录撤销与恢复的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何从 Android 手机免费恢复已删除的通话记录/历史记录?

    有一个有合作意向的人给我打电话,但我没有接听。更糟糕的是,我错误地将其删除,认为这是一个骚扰电话。那么有没有办法从 Android 手机恢复已删除的通话记录呢?”  塞缪尔问道。 如何在 Android 上恢复已删除的通话记录 ?如果您的 Android 数据没有备份,那么您必须寻

    2024年02月04日
    浏览(62)
  • Unity绘画功能实现(包含涂鸦、颜色一键填充、撤销操作、保存图像)

    项目需要,要实现在图像上进行绘画,看来网上的很多Unity绘画代码,感觉挺复杂的而且功能不全,这里我自己实现了一个在图像上进行绘画的代码,包含了涂鸦、一键填充颜色、撤销上一次操作、保存图片功能。 本项目是在http://www.qb5200.com/article/391439.html上进行了魔改。 左

    2024年02月14日
    浏览(43)
  • vue + canvas 实现涂鸦面板

    专栏分享:vue2源码专栏,vue router源码专栏,玩具项目专栏,硬核 💪 推荐 🙌 欢迎各位 ITer 关注点赞收藏 🌸🌸🌸 此篇文章用于记录柏成从零开发一个 canvas涂鸦面板 的历程,最终效果如下: 我们基于 canvas 实现了一款简单的涂鸦面板,用于在网页上进行绘图和创作。其支

    2024年02月14日
    浏览(42)
  • vscode恢复被误删的文件(巧用本地历史记录)

      背景: (希望永远不要有这个背景)使用vscode开发项目时,新建了文件,且文件没有git add、没有git stash、没有git commit。但是不小心点中了撤销更改(新文件的撤销更改,其实就是删除该新文件),导致文件或者文件中部分代码被删除。   诉求: 找回已删除的代码片段或

    2024年02月11日
    浏览(56)
  • JavaScript场景应用:Canvas实战开发一个二维折线图插件

    🏆作者简介,黑夜开发者,全栈领域新星创作者✌,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 🏆本文已收录于专栏:100个JavaScript的小应用。 🎉欢迎 👍点赞✍评论⭐收藏 折线图是一种常见的数据

    2024年02月14日
    浏览(43)
  • vscode插件——git分支管理、查看log提交的历史记录

    不辜负曾经那份热爱 当你觉得vscode用的不顺手时,就多找些插件叭❤ 一、Git Graph 1. 安装 选择红框的\\\"扩展\\\",搜索\\\"Git Graph\\\",直接安装即可。 2. 使用 打开源代码管理菜单,会发现右上角有个小分支图标,直接点击打开Git Graph。也可以直接从底部的Git Graph打开。 打开后,可查

    2024年02月11日
    浏览(82)
  • uniapp中使用canvas,在微信小程序中实现图片缩放移动涂鸦文字

    最近需要一个功能,在微信中编辑图片,实现对图片的涂鸦、加文字、缩放、移动,以下基本能实现该功能。 uniapp中使用画布,实现图片的编辑-批量批改图片 1.初始化画布图片,图片是网络图片,非本地图片,所以需要先获取图片信息,直接使用uni.getImageInfo(如果是本地图

    2024年04月14日
    浏览(63)
  • Visual Studio常用功能的设置(1)---安装插件、修改字体、查看历史记录、git diff

    (1)使用vs自带下载安装渠道 Visual Studio 的插件一般都需要下载之后,关闭VS,然后就会自动安装了 通过这个方式下载可能很慢,可以通过直接下载的方式 (2)直接去Extensions market 下载 https://marketplace.visualstudio.com/ 通过这种方式,需要先下载插件 关闭visual studio,然后点击安

    2024年02月05日
    浏览(54)
  • AndroidStudio实现在图片上涂鸦并记录涂鸦轨迹

    开个坑,终于有时间整理一下这个项目里用到的比较重要的技术 虽然最后甲方没有采用(笑) 因为博主学艺不精,有很多小bug AndroidStudio版本:2020.3.1.25 实现效果: 本文通过重写view类,实现在选择的图片上涂鸦的功能,因为项目需要残留了一些多余代码 项目结构: MainAct

    2024年02月09日
    浏览(42)
  • 解决Canvas画图清晰度问题

    最近在开发Web端远程桌面的时候遇到的一个问题,解决记录一下,分享给各位有需要用到的朋友。 先吹下水:远程桌面的连接我们是通过Websocket连接后,后端不断返回远程端的界面二进制数据流,我接收到之后转为图像,画到Canvas中,然后对canvas进行一系列的事件监听,传递

    2024年01月21日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包