<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        #button{

            width: 60px;

            height: 20px;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="600px" height="400px" style="background: #DBDDDF; "></canvas>

    <input type="button" value="撤销" id="button">

    <script type="text/javascript">

        var canvas=document.getElementById('canvas');

        var cext=canvas.getContext('2d');

        cext.strokeStyle="black";

        cext.lineWidth=2;

        cext.fillStyle="black";

        function getStyles(obj){//兼容FF，IE10; IE9及以下未测试

            return document.defaultView.getComputedStyle(obj);

        }

        function getCanvasPos(canvas,e)

        {//获取鼠标在canvas上的坐标

            var rect = canvas.getBoundingClientRect();

            var leftB = parseInt(getStyles(canvas).borderLeftWidth);//获取的是样式，需要转换为数值

            var topB = parseInt(getStyles(canvas).borderTopWidth);

            return {

                x: (e.clientX - rect.left) - leftB,

                y: (e.clientY - rect.top) - topB

           };

        } 

        var restorePoint = {};

        var shuzu=[];

        var h=0;

        var x1,x2,newx,newy;

        canvas.onmousedown=function (e) {

            restorePoint = cext.getImageData(0, 0, canvas.width, canvas.height);

            x1=getCanvasPos(canvas,e).x;

            x2=getCanvasPos(canvas,e).y;

            canvas.onmousemove=function(e){

                cext.putImageData(restorePoint, 0, 0);

                newx=getCanvasPos(canvas,e).x;

                newy=getCanvasPos(canvas,e).y;

                cext.beginPath();

                cext.moveTo(x1,x2);

                cext.lineTo(newx,newy);

                cext.stroke();

                cext.closePath();

            }

        }

        canvas.onmouseup=function(){

            shuzu[h] = restorePoint;

            h++;

            canvas.onmousemove=null;

        }

        document.getElementById("button").onmousedown=function(){

            restorePoint = shuzu[h-1];

                    cext.putImageData(restorePoint, 0, 0);

                    h--;

        }

    </script>

</body>

</html>

JS canvas 画板 撤销的更多相关文章

  1. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  2. 利用js+canvas实现的时钟效果图

    canvas+js时钟特效 运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果: <!--网页文档的声明--> <!doctype html&g ...

  3. 转 原生js canvas实现苹果电脑mac OS窗口最小化效果

    http://www.17sucai.com/pins/demo-show?id=2459 http://www.17sucai.com/pins/demo-show?id=2458  很多资料 ,前 ...

  4. js canvas游戏初级demo-躲避障碍物

    在线演示地址 http://200ok.fun:3100/html/game_demo.html 继上次js canvas游戏初级demo-上下左右移动(https://www.cnblogs.com ...

  5. QML学习笔记（二）-纯qml画图实现canvas画板-鼠标画图

    作者: 狐狸家的鱼 Github: 八至 版权声明:如需转载请获取授权和联系作者 用纯qml实现canvas画板功能,用鼠标进行画图,可以画直线,画圆,画矩形,画弧线. 由于canvas画图会有延迟和 ...

  6. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  7. chart.js & canvas

    chart.js & canvas https://www.chartjs.org/samples/latest/ https://www.chartjs.org/samples/latest ...

  8. Atitit js canvas的图像处理类库attilax总结与事业

    Atitit js canvas的图像处理类库attilax总结与事业 1.1. 脸部识别JavaScript类库Tracking.js1 1.2. AlloyImage特性1 1.3. CamanJ ...

  9. js canvas captcha

    js canvas captcha https://thejackalofjavascript.com/building-a-captcha-using-html5-canvas/ https://a ...

随机推荐

  1. 第三篇 Flask 中的 request

    第三篇 Flask 中的 request   每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的 为了了解Flask的request中都有什么东西,首先我们要写一个前 ...

  2. c++学习路线连接

    https://blog.csdn.net/qq_36482772/article/category/7396881/4?

  3. np.where()命令介绍

  4. c# int类型的转datetime类型

    int a =20190319; DateTime  b =  DateTime.ParseExact(a.tostring(),"yyyyMMdd",System.Globali ...

  5. 坑 flutter Positioned相关

    child: new Positioned( right: 0.0, ...... 报错: Positioned widgets must be placed directly inside Stac ...

  6. Nevertheless 和 Nonetheless，你用对了吗？

    本文转自:https://www.sohu.com/a/229443257_338773 Nevertheless 以及 nonetheless 都可以表示转折.很多人很多课程也提到这两者基本上可以交 ...

  7. [BZOJ2252]矩阵距离(BFS)

    题意 输入矩阵m行n列(m<=500,n<=500),只含0.1,输出离每个元素距离最近的1的距离,其中距离定义为D(aij,akl)=abs(i-k)+abs(j-l). 示例: 输入: ...

  8. redis哨兵集群

    Sentinel 哨兵 修改src下的sentinel.conf文件 , 配置端口  :port:随便   daemonize yes 配置主服务器的ip 和端口 我们把监听的端口修改成7000,并且 ...

  9. mysql7.5.x删除重新安装

    删除: cmd管理员运行,进入D:\devs\MySQL\mysql-5.7.25-winx64\bin目录下: 输入命令:sc delete mysql 删除data目录下的所有文件 安装: 创建m ...

  10. CentOS查询端口占用和清除端口占用的程序

    1.查询端口号占用,根据端口查看进程信息 [root@server2 ~]# lsof -i: COMMAND PID USER FD TYPE DEVICE SIZE NODE NAME httpd ...