canvas 实现绘制 线，图形，并且可动态改变线，图形，功能可拓展。

利用canvas 实现绘制线  多边形图案 并且可以动态修改其 大小 形状

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body,
			html {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div>
			<canvas id="can" width="600px" height="600px" style="border:1px solid #000000;"></canvas>
			<p>当前为----<span id="cantype">线</span></p>
			<p>
				<button type="button" onclick="setCanType('线')">线</button>
				<button type="button" onclick="setCanType('多边形')">多边形</button>
				<button type="button" onclick="startDraw()">绘制</button>
				<button type="button" onclick="clean()">清除</button>
			</p>

		</div>
	</body>
	<script type="text/javascript">
		var canType = '线';
		var delNum = 0; //点的数量
		var canvas = document.getElementById("can");
		var ctx = canvas.getContext("2d");
		var cantype = document.getElementById("cantype");
		var delArr = []; //点的集合
		var mouseIndex = [];
		getPoint();

		function getPoint() {
			var canvas = document.getElementById("can");
			canvas.addEventListener("click", phandler, false);
		}

		function phandler(evt) {
			var x = evt.clientX;
			var y = evt.clientY;
			var rect = canvas.getBoundingClientRect();
			x -= rect.left;
			y -= rect.top;
			drawPoint(x, y);
			delArr.push({
				"x": x,
				"y": y
			})
			delNum += 1;
			if (canType == "线" && delNum == 2) {
				lineTo();
			}
			console.log(x, y); // (x, y) 就是鼠标在 canvas 单击时的坐标
		}

		function removeClick() {
			canvas.removeEventListener("click", phandler, false);
			initLister();
		}

		function startDraw() {
			if (canType == "多边形") {
				fourLineTo();
			} else {
				alert("绘制线不需要手动,多边形需要手动绘制");
			}
		}

		function setCanType(type) {
			clean();
			canType = type
			cantype.innerHTML = type;
			canvas.onmousemove = function(e) {};
			canvas.onmousedown = function(e) {};
			canvas.onmouseup = function(e) {};
		}
		//画线
		function lineTo() {
			ctx.moveTo(delArr[0].x, delArr[0].y);
			ctx.lineTo(delArr[1].x, delArr[1].y);
			ctx.stroke();
			removeClick();
		}
		//多边形
		function fourLineTo() {
			ctx.beginPath();
			ctx.lineWidth = 1;
			// ctx.strokeStyle = "red";
			ctx.fillStyle = "aqua"
			ctx.moveTo(delArr[0].x, delArr[0].y);
			for (var i = 1; i < delArr.length; i++) {
				ctx.lineTo(delArr[i].x, delArr[i].y);
			}
			ctx.closePath();
			ctx.stroke();
			removeClick();
		}
		//清除
		function clean() {
			ctx.clearRect(0, 0, 500, 500);
			var w = canvas.width;
			var h = canvas.height;
			canvas.width = w;
			canvas.height = h;
			delArr = [];
			delNum = 0;
			
			getPoint();
		}
		//画点
		function drawPoint(x, y) {
			// ctx.beginPath();
			// ctx.strokeStyle = "red";
			// ctx.fillStyle = "red";
			// ctx.arc(x, y, 10, 0, 2 * Math.PI);
			// ctx.stroke();
			ctx.beginPath();
			ctx.strokeStyle = "red";
			ctx.rect(x -2, y -2, 4, 4);
			ctx.stroke();
		}

		function initLister() {
			canvas.onmousedown = function(e) {
				canvasDown(e);
			}
			canvas.onmouseup = function(e) {
				canvasUp(e);
			}
		}

		function canvasMove(evt) {
			var x = evt.clientX;
			var y = evt.clientY;
			var rect = canvas.getBoundingClientRect();
			x -= rect.left;
			y -= rect.top;
			console.log("移动后的新位置",x,y);
			delArr[ mouseIndex[0] ].x = x;
			delArr[ mouseIndex[0] ].y = y;
			ctx.clearRect(0, 0, 600, 600);
			for(var i =0;i<delArr.length;i++){
				ctx.beginPath();
				ctx.strokeStyle = "red";
				ctx.rect(delArr[i].x -2, delArr[i].y -2, 4, 4);
				ctx.stroke();
			}
			if(canType == "线"){
				ctx.moveTo(delArr[0].x, delArr[0].y);
				ctx.lineTo(delArr[1].x, delArr[1].y);
				ctx.stroke();
			}else{
				fourLineTo();
			}
			
		}

		function canvasDown(evt) {
			var x = evt.clientX;
			var y = evt.clientY;
			var rect = canvas.getBoundingClientRect();
			x -= rect.left;
			y -= rect.top;
			console.log("点击的位置", x, y);
			//判断是否在已经存在的点上
			// for(var i =0; i<delArr.length;i++){
			// 	drawPoint(delArr[i].x,delArr[i].y);
			// 	console.log(ctx.isPointInPath(x,y));
			// 	// if(ctx.isPointInPath(x,y)){
			// 	// 	index = i;
			// 	// 	break;
			// 	// 	console.log("点击了第" + index+1 +"个点。");
			// 	// }
			// }
			
			mouseIndex = []; //保存点击事件包含图形的index值
			ctx.clearRect(0, 0, 600, 600);
			for(var i =0;i<delArr.length;i++){
				ctx.beginPath();
				ctx.strokeStyle = "red";
				ctx.rect(delArr[i].x - 2, delArr[i].y -2, 4, 4);
				ctx.stroke();
				if (ctx.isPointInPath(x,y)) {
					//如果当前环境覆盖了该坐标，就将图形的index放到数组里
					mouseIndex.push(i);
					canvas.onmousemove = function(e) {
						canvasMove(e);
					};
					break;
				}else{
					mouseIndex = [];
				}
			}
			if(canType == "线"){
				lineTo();
			}else{
				fourLineTo();
			}
			console.log(mouseIndex)
		}

		function canvasUp(e) {
			canvas.onmousemove = function(e) {
				
			};
		}
	</script>
</html>

 

posted @ 2022-02-17 16:37  写bug的靓仔  阅读(718)  评论(0)    收藏  举报