canvas绘制任意两点的动态直线

最新推荐文章于 2023-10-24 20:19:05 发布

前端小白的江湖路

最新推荐文章于 2023-10-24 20:19:05 发布

阅读量7k

点赞数 2

分类专栏： Canvas和webGL 文章标签： canvas

本文链接：https://blog.csdn.net/qq_21058391/article/details/54557214

版权

Canvas和webGL 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

先简单分析一下原理

对于任意两点 (x1,y1） (x2,y2)

如果斜率存在，y=kx+b k=(y2-y1)/(x2-x1) b=y1-kx1（）

不存在的话，就是垂直的情况 x=m y定义在[y1,y2]上

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width">
		<title>Canvas绘制任意两点间的动态直线</title>
		<link rel="stylesheet" href="./style.css"/>
		<script src="../jquery-3.1.0.min.js"></script>
	</head>

	<body>
		<div class="drawing-container">
			<canvas id="canvas">
		</div>
		<script src="./action.js"></script>
	</body>
</html>

看看CSS文件

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

.drawing-container{
	width:100%;
	height:1000px;
}

#canvas{
	display:block;
	background-color:rgb(12, 15, 33);
}

JS文件

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

/*
	canvas 元素的自适应大小与重新绘制
	-------------------------------------------------------------------------------------
*/
function canvasResize(){
	canvas.width=$(".drawing-container").width();
	canvas.height=$(".drawing-container").height();
}

canvasResize();

$(window).resize(function(){
	canvasResize();
});

//绘制任意两点之间的动态直线

/*
	画动态直线
	@(x1,y1)    起点
	@(x2,y2)    终点
*/
function drawDynamicLine(x1,y1,x2,y2){
	if(x1==x2)
	{
		drawVerticalLine(x1,y1,x2,y2);   /*斜率不存在的情况*/
	}else
	{
		drawCommonLine(x1,y1,x2,y2);    /*斜率为正或者负或者0*/
	}

		/*k存在的情况*/
	function drawCommonLine(x1,y1,x2,y2)
	{

		//y=kx+b
		var k=(y2-y1)/(x2-x1)   //斜率k     正 负 0
		var b=y1-k*x1           //常数b
		var i=0;
		var flag=compare(x1,x2);

		function draw(){
			var xi=x1+i;
			var yi=k*xi+b;
			var xj=x1+i+5     //控制步长决定绘制的是虚线还是实线
			var yj=k*xj+b;
			drawLine(xi,yi,xj,yj);
			i+=20*flag;               
			if(Math.abs(i)<=Math.abs(x1-x2))
			{
				window.setTimeout(function(){
					draw();
				},50);
			}
		}
		draw();
	}

	/*k不存在，也就是垂直的情况*/
	function drawVerticalLine(x1,y1,x2,y2){
		var i=0;
		var flag=compare(y1,y2);
		function draw(){
			var yi=y1+i;
			var yj=y1+i+5*flag;
			drawLine(x1,yi,x2,yj);
			i+=20*flag;
			if(Math.abs(i)<=Math.abs(y1-y2))
			{
				window.setTimeout(function(){
					draw();
				},50);
			}
		}
		draw();
	}
	
	/*比较函数*/
	function compare(a,b){
		if(a<b){
			return 1;
		}else
		{
			return -1;
		}
	}


		/*线条片段*/
	function drawLine(x1,y1,x2,y2)
	{
		ctx.beginPath();
		ctx.moveTo(x1,y1);
		ctx.lineTo(x2,y2);
		ctx.lineWidth=1;
		ctx.strokeStyle="white";
		ctx.stroke();
		ctx.closePath();
	}

	/*清除画布*/
	function clear(){
		ctx.clearRect(0,0,canvas.width,canvas.height);
	}
}

drawDynamicLine(100,100,400,100);
drawDynamicLine(400,100,400,800);
drawDynamicLine(400,800,400,800);
drawDynamicLine(400,800,100,800);
drawDynamicLine(100,800,100,100);
drawDynamicLine(100,100,400,800);

前端小白的江湖路

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制任意两点的动态直线

Canvas draw Dynamic Lines start point end point *{ margin:0; padding:0; box-sizing:border-box;}.canvas-container{ position:absolute; width:1
复制链接

扫一扫