javascript动画基础(五)--三角学在动画中的运用(4)_javascript三角形已知勾股,三角函数求弦-CSDN博客

本文链接：https://blog.csdn.net/ying422/article/details/39717879

本文介绍了如何在计算机动画场景中应用勾股定理来计算两点之间的距离，并通过HTML、CSS和JavaScript实现了一个简单的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

勾三股四弦五，是的，接下来三角形的勾股定理，它能很方便的计算边长，计算公式相信大家都知道：A的平方 + B的平方 = C的平方。

但是这个勾股定理在计算机动画里面有什么用呢？其实计算两点之间的距离我们就可以运用勾股定理，观察下面的图形

根据勾股定理，我们可以直接套公式

var dx = x2 - x1;
var dy = y2 - y1;
var dist = Math.sqrt(dx*dx + dy*dy);

我们看一下，下面的例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>distance</title>
	<style>
		canvas{
			border: 1px dashed #ccc;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width=500 height=500></canvas>
</body>
<script>
window.onload = function(){
	var myCanvas = document.getElementById('myCanvas');
	var ctx = myCanvas.getContext('2d');
	var mouse = captureMouse(myCanvas);


	(function distance(){
		setTimeout(distance,1000/60);
		ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
		var dx = mouse.x - 250;
		var dy = mouse.y - 250;
		var dist = Math.sqrt(dx * dx + dy * dy);
		ctx.beginPath();
		ctx.moveTo(250,250);
		ctx.lineTo(mouse.x,mouse.y);
		ctx.stroke();
		ctx.fillText("mouse_x:" + mouse.x + " mouse_y:"+mouse.y + " dist:"+dist,mouse.x+8,mouse.y+8);
	}());
}

function captureMouse(element) {
  var mouse = {x: 0, y: 0, event: null},
      body_scrollLeft = document.body.scrollLeft,
      element_scrollLeft = document.documentElement.scrollLeft,
      body_scrollTop = document.body.scrollTop,
      element_scrollTop = document.documentElement.scrollTop,
      offsetLeft = element.offsetLeft,
      offsetTop = element.offsetTop;
  
  element.addEventListener('mousemove', function (event) {
    var x, y;
    
    if (event.pageX || event.pageY) {
      x = event.pageX;
      y = event.pageY;
    } else {
      x = event.clientX + body_scrollLeft + element_scrollLeft;
      y = event.clientY + body_scrollTop + element_scrollTop;
    }
    x -= offsetLeft;
    y -= offsetTop;
    
    mouse.x = x;
    mouse.y = y;
    mouse.event = event;
  }, false);
  
  return mouse;
};
</script>
</html>