<!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. NIO学习笔记

    零.前言 这里整理摘录了我了解NIO的一些笔记. 参考资料: 1.深入浅出NIO之Channel.Buffer 2.深入浅出NIO之Selector实现原理 3.Java NIO vs. IO 一.N ...

  2. Codeforces Round #553 (Div. 2) B题

    题目网址:http://codeforces.com/contest/1151/problem/B 题目大意:给定一个n*m的矩阵,问是否可以从每一行中选择一个数,使得这n个数异或大于0,如果可以还要 ...

  3. MySql 游标定义时使用临时表

    参考:Re: Temp Table in Select of a Cursor 方法一: delimiter $$ create procedure test_temp() begin drop te ...

  4. IIS7如何实现访问HTTP跳转到HTTPS访问

    感谢原文作者,为方便后期查阅转载,原文链接:https://www.cnblogs.com/xiefengdaxia123/p/8542737.html 通常情况下我们是用的都是http的路径,对于h ...

  5. Vue中 $ref 的用法

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意:如果获取的是一个子组 ...

  6. Vue 中使用 viewerjs进行本地上传预览图片

    https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是 接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...

  7. douyin-bot-代码

    # -*- coding: utf-8 -*- import sys import random import time from PIL import Image if sys.version_in ...

  8. 图数据库-Neo4j使用

    Cypher 查询语言简单使用 3.1.基本语法 Node语法: Cypher使用一对圆括号来表示一个节点:提供了多种格式如下: () 匿名节点 (matrix)  为节点添加一个ID (:Movie ...

  9. UWP作业（一）XAML Controls Gallery

    作为一个编程能力不是很好的uwp初学者,在控件库里看到种类繁多的选项时,需要查资料,最后决定出几种性能各方面可能不是那么出色的控件,内心也是非常纠结的.但当我把自己当成一个用户时,通过分析自己的需求, ...

  10. java反射获取Object的属性和值

    在看反射顺便做个笔记,目前知道的反射的Object都是要有对象的也就是实体Bean. import java.lang.reflect.Field; import java.util.ArrayLis ...