html5 canvas 繪製、移動方塊及撤銷操作

阿新 • • 發佈：2021-02-07

技術標籤：html5 html5

這是給客戶做的一個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>