<!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. Linux - 系统信息相关命令

    系统信息相关命令 本节内容主要是为了方便通过远程终端维护服务器时,查看服务器上当前 系统日期和时间 / 磁盘空间占用情况 / 程序执行情况 本小结学习的终端命令基本都是查询命令,通过这些命令对系统资源 ...

  2. 关于逻辑回归是否线性？sigmoid

    from :https://www.zhihu.com/question/29385169/answer/44177582 逻辑回归的模型引入了sigmoid函数映射,是非线性模型,但本质上又是一个线 ...

  3. k8s环境清理

    每一种方法 #!/bin/shdocker rm -f $(docker ps -qa)docker volume rm $(docker volume ls -q)cleanupdirs=" ...

  4. I/O多路复用、协程、线程、进程

    select注册fd,阻塞,当有fd状态改变时返回,确认对应的fd,做下一步处理.简单来说就是先注册,注册完后休眠并设置一个定时器醒来查看,有事件就通知来取,进行后续动作,没事件就继续睡,再设闹钟.用 ...

  5. Floyd-Warshall算法计算有向图的传递闭包

    Floyd-Warshall算法是用来求解所有结点对最短路径的知名算法,其还有一个重要的用途就是求解有向图的传递闭包,下面就让我来介绍算法导论中关于有向图闭包计算的有关记载吧. 有向图的传递闭包:我们 ...

  6. [Java]刷题中的Java基础

    数组 取数组长度是属性length ArrayList ArrayList<Integer> maxRootHeap = new ArrayList<Integer>(); m ...

  7. http标码集合

    201 Created告诉客户端,请求成功,资源已经创建.新的资源的网址请看 202 Accepted告诉客户端,请求已经接受,但还没有处理,可以去Location字段查询进展. 200 Ok告诉客户 ...

  8. Populate screen data automatically

    field zz_test-uname. module populate_record on chain-request. module populate_record input. ztlo_tes ...

  9. 010 Editor 8.0.1 之 逆向分析及注册机编写

    前言一.工具及软件介绍二.逆向分析2.1.找到提示错误注册弹窗2.2.分析跳转处代码2.3.=2D 函数分析2.3.1.获取注册码处分析2.3.2.3处分支分析2.3.2.1.9C情况2.3.2.2. ...

  10. Solidity知识点集 — 溢出和下溢

    合约安全增强: 溢出和下溢 什么是 溢出 (overflow)? 假设我们有一个 uint8, 只能存储8 bit数据.这意味着我们能存储的最大数字就是二进制 11111111 (或者说十进制的 2^ ...