在Canvas画布上绘制直线

最新推荐文章于 2024-03-25 10:25:21 发布

天真的蜗牛

最新推荐文章于 2024-03-25 10:25:21 发布

阅读量321

点赞数 2

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_62517790/article/details/128375814

版权

代码：

<body>
	<canvas style = "border:1px solid red"></canvas>
	<br>
	<input type = "button" value = "画线" onclick = "line()">
	<input type = "button" value = "取消画笔" onclick = "finishLine()">
</body>
</html>
<script>
    // 声明全局变量
	var canvas = document.querySelector("canvas");
	// 在CSS样式表中设置标签的宽度时仅仅是将标签拉伸了
	// 修改画布的大小要直接对标签的大小调整
	canvas.width = "600";
	canvas.height = "400"
	var context = canvas.getContext("2d");
	var points = new Array();
	// 为画布绑定事件
	function line(){
		canvas.addEventListener("mousedown", beginLine);
	}
	// 为画布注销事件
	function finishLine(){
		canvas.removeEventListener("mousedown", beginLine);
		// 清空数组
		points.splice(0, points.length);
	}
	function beginLine(e){
			context.lineWidth = "1px";
			context.strokeStyle = "red"
            // 声明局部变量
			let X = e.pageX - canvas.offsetLeft;
			let Y = e.pageY - canvas.offsetTop;
			let pois = Object.create({x:X, y:Y});
			points.push(pois);
			if(points.length == 1){
				return null;
			}
			else{
				context.beginPath();
				context.moveTo(points[0].x, points[0].y);
				for(let i = 0; i <= points.length - 1; i++){
					context.lineTo(points[i].x, points[i].y);
				}
				context.stroke();
			}
		}
</script>

丑是丑了点，大家凑合看吧：