JS canvas 画板 撤销
2024-10-03 20:27:46
<!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>
最新文章
- 安装 pywin32-218.win32-py2.7.exe 报错python version 2.7 required,which was not found in the registry解决方案
- 如何自己编写一个easyui插件
- BZOJ-2186 沙拉公主的困惑 线性筛(筛筛筛)+线性推逆元
- [札记]IL经典指令解析之方法调度
- javascript之高级函数应用思想
- NEsper z
- A Simple Problem with Integers(线段树,区间更新)
- BZOJ 2716: [Violet 3]天使玩偶( CDQ分治 + 树状数组 )
- 【我的书】Unity Shader的书 — 文件夹(2015.12.21更新)
- 微信公众平台开发-微信服务器IP接口实例(含源码)
- 编码的秘密(python版)
- listview--Java泛型应用之打造Android万能ViewHolder-超简洁写法
- AngularJS学习之旅—AngularJS 简介(一)
- 前后端分离的利器:fiddler的实用功能举例
- 将自己的ubuntu18.04打包成镜像
- CSS-弹性布局-伪类选择器-复杂选择器
- Agreementhasbeenupdated--EditPhoneNumber
- ng-model 数据不更新 及 ng-repeat【ngRepeat:dupes】错误
- 抹掉Scala的糖衣(14) -- Update Method
- C# 轻松读取、改变文件的创建、修改、访问时间 z