时间戳

首页 > 解决方案 > 计算缺失坐标

javascript - 计算缺失坐标

问题描述

我即将用画布开发一个特殊的动画。我想围绕一个圆圈旋转一个等腰三角形。

图像

注意：我不想旋转画布本身。我想每帧计算三角形的 3 个点。(!).

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

let trianglePositionAngle = 0;
let triangleSizeAngle = 15;


function draw(trianglePositionAngle) {
  ctx.fillStyle = "blue"
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  let radius = 70
  ctx.fillStyle = "black"
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);
  ctx.fill();

  let triangle = {
    x1: canvas.width / 2 + radius * Math.cos((trianglePositionAngle * Math.PI / 180)),
    y1: canvas.height / 2 + radius * Math.sin((trianglePositionAngle * Math.PI / 180)),

    x2: canvas.width / 2 + radius * Math.cos(((trianglePositionAngle + triangleSizeAngle) * Math.PI / 180)),
    y2: canvas.height / 2 + radius * Math.sin(((trianglePositionAngle + triangleSizeAngle) * Math.PI / 180))
  }

  ctx.fillStyle = "red"
  ctx.beginPath()
  ctx.moveTo(triangle.x1, triangle.y1);
  ctx.lineTo(triangle.x2, triangle.y2);
  ctx.lineTo(canvas.width/2, canvas.height/2); // looking for the coordinates of this point
  ctx.fill();
}

setInterval(function() {
  draw(trianglePositionAngle++)
},100)
<canvas id="canvas" width="200" height="200"></canvas>

因为我知道三角形的对边长度相等，所以我只需要计算最后一点。我知道理论路径：

尽管如此，我在实施它时遇到了问题，希望有人能帮助我。提前致谢。

标签： javascripthtmlmathcanvasgeometry

解决方案

计算三角形第三点的坐标，应使用点 1 和 2 之间的中间角。半径应扩大三角形的高度。我对最后一个参数给出了简单的近似：

x3: canvas.width / 2 + 
   radius * (1 + 0.866 * triangleSizeAngle * Math.PI / 180) * 
   Math.cos(((trianglePositionAngle + triangleSizeAngle / 2) * Math.PI / 180))

y3: canvas.height / 2 + 
   radius * (1 + 0.866 * triangleSizeAngle * Math.PI / 180) * 
   Math.sin(((trianglePositionAngle + triangleSizeAngle / 2) * Math.PI / 180))

0.866=Sqrt(3)/2是等腰三角形高度和边的比率。

近似使用弧长作为边（它们略有不同，但对于绘图目的可以忽略不计）。

更精确的值

instead of 
  (1 + 0.866 * triangleSizeAngle * Math.PI / 180)
you can use
  (cos(0.5* triangleSizeAngle * Math.PI / 180) + 
  Sqrt(3)* sin(0.5* triangleSizeAngle * Math.PI / 180))

推荐阅读