html5 canvas 绘制、移动方块及撤销操作

最新推荐文章于 2024-05-08 13:54:16 发布

maskice

最新推荐文章于 2024-05-08 13:54:16 发布

阅读量602

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/maskice/article/details/112555474

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是给客户做的一个demo，需求是在线编辑一些文件照片，将里面涉及的人名进行遮挡。

实现过程：点击鼠标后在文件上绘制一个灰色方块，由于坐标误差，所以增加了移动方块的操作。

示例截图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<style>
			body{ background:black;}
			#c1{ background:white;}
			span{ color:white;}
		</style>
		<script>
			var mX = 0; // 鼠标坐标
			var mY = 0;
			var oC;
			var oGC;
			var cPushArray = new Array();
			var cStep = -1;
			function showImg() {
				document.getElementById('img1').src = document.getElementById('c1').toDataURL();
			}
			function cPush() {
				cStep++;
				if (cStep < cPushArray.length) { cPushArray.length = cStep; }
				cPushArray.push(document.getElementById('c1').toDataURL());
				console.log(cStep)
			}
			window.onload = function(){
				oC = document.getElementById('c1');
				oGC = oC.getContext('2d');
				var img=new Image()
				img.src="img/000.png";
				img.onload = function () //确保图片已经加载完毕
				{
					oGC.drawImage(img,0,0);
					cPush();
				}

				oC.onmousedown = function(ev){
					var ev = ev || window.event;
					mX = ev.pageX;
					mY = ev.pageY;
					oGC.fillStyle="#AAAAAA";
					oGC.fillRect(mX,mY,21,21);
					cPush();
					/**oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
					document.onmousemove = function(ev){
						var ev = ev || window.event;
						oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
						oGC.stroke();
					};
					document.onmouseup = function(){
						document.onmousemove = null;
						document.onmouseup = null;
					};**/
				};
				// oC.onmouseup = function(ev){
				// 	var ev = ev || window.event;
				// 	var x = ev.pageX ;
				// 	var y = ev.pageY;
				// 	oGC.fillRect(mX,mY,x-mX,20);
				// };

			};
			function up() {
				console.log("cUndo"+cStep)
				if (cStep > 0) {
					cStep--;
					var canvasPic = new Image();
					canvasPic.src = cPushArray[cStep];
					canvasPic.onload = function () {
						oGC.drawImage(canvasPic, 0, 0);
						mY = mY - 2;
						oGC.fillStyle="#AAAAAA";
						oGC.fillRect(mX,mY,21,21);
						cPush();
					}
				}
			}
			function down() {
				console.log("cUndo"+cStep)
				if (cStep > 0) {
					cStep--;
					var canvasPic = new Image();
					canvasPic.src = cPushArray[cStep];
					canvasPic.onload = function () {
						oGC.drawImage(canvasPic, 0, 0);
						mY = mY + 2;
						oGC.fillStyle="#AAAAAA";
						oGC.fillRect(mX,mY,21,21);
						cPush();
					}
				}
			}
			function left() {
				console.log("cUndo"+cStep)
				if (cStep > 0) {
					cStep--;
					var canvasPic = new Image();
					canvasPic.src = cPushArray[cStep];
					canvasPic.onload = function () {
						oGC.drawImage(canvasPic, 0, 0);
						mX = mX - 2;
						oGC.fillStyle="#AAAAAA";
						oGC.fillRect(mX,mY,21,21);
						cPush();
					}
				}
			}
			function right() {
				console.log("cUndo"+cStep)
				if (cStep > 0) {
					cStep--;
					var canvasPic = new Image();
					canvasPic.src = cPushArray[cStep];
					canvasPic.onload = function () {
						oGC.drawImage(canvasPic, 0, 0);
						mX = mX + 2;
						oGC.fillStyle="#AAAAAA";
						oGC.fillRect(mX,mY,21,21);
						cPush();
					}
				}
			}
			function cUndo() {
				console.log("cUndo"+cStep)
				if (cStep > 0) {
					cStep--;
					var canvasPic = new Image();
					canvasPic.src = cPushArray[cStep];
					canvasPic.onload = function () { oGC.drawImage(canvasPic, 0, 0); }
				}
			}
			function cRedo() {
				console.log("cRedo"+cStep)
				if (cStep < cPushArray.length-1) {
					cStep++;
					var canvasPic = new Image();
					canvasPic.src = cPushArray[cStep];
					canvasPic.onload = function () { oGC.drawImage(canvasPic, 0, 0); }
				}
			}
		</script>
	</head>

	<body>
	<table>
		<tr>
			<td>
	<canvas id="c1" width="713" height="730">
		<span>不支持canvas浏览器</span>
	</canvas> <!--默认：宽300 高150-->
			</td>
			<td>
				<input type="button" value="上移" onclick="up()"><br>
				<input type="button" value="下移" onclick="down()"><br>
				<input type="button" value="左移" onclick="left()"><br>
				<input type="button" value="右移" onclick="right()"><br>
	<input type="button" value="撤销" onclick="cUndo()"><br>
	<input type="button" value="取消撤销" onclick="cRedo()"><br>
				<input type="button" value="查看结果图片" onclick="showImg()">
			</td>
		</tr>
		<tr>
			<td>
				<img alt="点击查看图片按钮可以查看结果" id="img1" src="">
			</td>
		</tr>
	</table>
	</body>
</html>

maskice

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas 绘制、移动方块及撤销操作

示例截图：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>测试</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script>
复制链接

扫一扫