<!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. 【Spring】Spring3＋Spring3MVCの環境構築(中)

    参考URL: https://www.cnblogs.com/lnsylt/p/10258457.html ■目録 ■環境設定 ①pom.xml <?xml version="1.0& ...

  2. Python设计模式 - UML - 交互概述图(Interaction Overview Diagram)

    简介 交互概述图是将不同交互图衔接在一起的图,属于UML2.0的新增图.交互概述图并没有引入新的建模元素,其主要元素来自于活动图和时序图.交互概述图侧重从整体上概览交互过程中的控制流,包括交互图之间的 ...

  3. TZOJ 2703 Cow Digit Game(sg博弈)

    描述 Bessie is playing a number game against Farmer John, and she wants you to help her achieve victor ...

  4. java基础 ----- 程序的调试

    --- -- 什么是程序调试 当程序出错时,我们希望可以这样 逐条语句执行程序   -----    观察程序的执行情况 ------  发现问题   -----  解决问题 但是,程序一闪就运行结束 ...

  5. Error starting Tomcat context. Exception: org.springframework.beans.factory.BeanCreationException

    Error starting Tomcat context. Exception: org.springframework.beans.factory.BeanCreationException. M ...

  6. angular中文文档的滚动条样式

    个人感觉angular中文文档的滚动条样式非常棒,于是乎就扒了下来 https://www.angular.cn/ body::-webkit-scrollbar { /* 定义了滚动条整体的样式 * ...

  7. docker 删除所有none的镜像

    docker images|grep none|awk '{print $3}'|xargs docker rmi

  8. github 生成配置ssh 秘钥方法详解

    如果安装github成功后,当从本地提交文件到github的时候,提交不成功,报错,可能问题就是你还没有生成ssh秘钥 1.当你提交文件到github,不成功,出现如下的情况,就代表着github上面 ...

  9. MVC htmlAttributes and additionalViewData

    @Html.TextBoxFor(m => m.UserName, new { title = "ABC" }) // 输出结果为 <input data-val=&q ...

  10. HTTP之请求消息Request

    客户端发送一个HTTP请求到服务器的请求消息包括以下格式: 请求行(request line).请求头部(header).空行和请求数据四个部分组成. 请求行以一个方法符号开头,以空格分开,后面跟着请 ...