<!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. 初学c# -- 记录QQ键盘

    扫描进程,如果QQ启动了,开始记录键盘,别的程序都不记录.记录到e:\log.txt里面,当然也可以修改为截屏+记录发送到邮箱或客户端 进程 Process[] p = Process.GetProc ...

  2. jq动画设置图片抽奖(修改效果版)

    效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...

  3. CSS的优先级和继承问题

    CSS的优先级和继承问题 ★CSS的冲突,即优先级 CSS本身的设置可以同时应用多个样式在同一个元素,此时样式之间可能出现冲突而达不到用户所想要的效果. ★解决CSS冲突的优先级规则: ● CSS层叠 ...

  4. 学习日记--用Vector（向量）实现动态数组

    Vector的使用方法: 能在添加元素时增加长度的数组称为动态数组或可变长数组.相对地,必须事先指定长度,只能容纳一定数量元素的数组称为静态数组.下面分享一下如何借助STL(标准模板库)中的Vecto ...

  5. Python学习笔记4基本数据类型

    start:16:00 1.Python基本数据类型 (1)数字类型及其操作 整数类型 浮点数类型 浮点数间运算存在不确定尾数,不是bug 复数类型 数值运算操作符 (2)数值运算函数    . 2. ...

  6. java 调用存储过程

    1.java 中调用pl/sql 中的存储过程 call 存储过程的名称(参数名称,参数名称)  在service 层中调用  存储过程  String  sql=" call  proc_ ...

  7. 把多个字符串里面的项写到不同的对象中，然后在push到一个数组中

    otherUserNames: "甲,乙,丙,丁"otherUserIds: "10008750,10008711,10003348,10008747" oth ...

  8. vue实例的生命周期

    Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...

  9. python基础 (装饰器,内置函数)

    https://docs.python.org/zh-cn/3.7/library/functions.html 1.闭包回顾 在学习装饰器之前,可以先复习一下什么是闭包? 在嵌套函数内部的函数可以使 ...

  10. ASP.NET Core 项目简单实现身份验证及鉴权

    ASP.NET Core 身份验证及鉴权 目录 项目准备 身份验证 定义基本类型和接口 编写验证处理器 实现用户身份验证 权限鉴定 思路 编写过滤器类及相关接口 实现属性注入 实现用户权限鉴定 测试 ...