如何在 html canvas 中显示三角形的质心？

Question

我试图通过显示从顶点到对边中点的直线来显示三角形的质心，如下图所示

这是我在 html 中能够编写的代码，我不确定如何在其中显示质心。

<html>
    <head>
        <title>
            Canvas exercise
        </title>
        <script>
            function strokeExercise(){
                
                var canvas = document.getElementById("canvas");
                var context = canvas.getContext("2d");
                var x1 = document.getElementById("x1").value;
                var x2 = document.getElementById("x2").value;
                var x3 = document.getElementById("x3").value;
                var y1 = document.getElementById("y1").value;
                var y2 = document.getElementById("y2").value;
                var y3 = document.getElementById("y3").value;

                context.beginPath();
                context.moveTo(x1, y1);
                context.lineTo(x1, y1);
                context.lineTo(x2, y2);
                context.lineTo(x3, y3);
                context.closePath();
                
                context.strokeStyle = "purple";
                context.lineWidth = "2";
                context.stroke();
                
                context.fillStyle="purple";
                context.fill();
                
            }
        </script>
    </head>
    <body>
        Enter the coordinate for 1st point: X=<input type='text' id='x1'/> Y=<input type='text' id='y1'/>
        <br/>
        Enter the coordinate for 2nd point: X=<input type='text' id='x2'/> Y=<input type='text' id='y2'/>
        <br/>
        Enter the coordinate for 3rd point: X=<input type='text' id='x3'/> Y=<input type='text' id='y3'/>
        <br/>
        <br/>
        <canvas id="canvas" width="700" height="500" style="border:1px solid black;">
            Your browser does not support canvas.
        </canvas>
        <br/>
        <br/>
        <button onClick="strokeExercise()">
            Draw Triangle
        </button>
    </body>
</html>

Answer 1

显示质心实际上与您已经在做的事情并不太远。 'hardest' 部分正在计算给定边的中点。

我们来看下图。

由上可知，点A的对面是a，由点B 和 C。计算直线的中点非常简单，只需将起点和终点的 horizontal/vertical 位置相加，最后将结果除以二即可。

更数学地说：

在我们得到中点的 x 和 y 值后，我们只需要从点 A 到中点再画一条线。当然其他两侧的原理是一样的

这是一个例子：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x1 = 205;
var x2 = 50;
var x3 = 430;
var y1 = 25;
var y2 = 220;
var y3 = 240;

context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.closePath();

context.strokeStyle = "purple";
context.lineWidth = "5";
context.stroke();

context.fillStyle = "violet";
context.fill();

function midPoint(p1, p2) {
  return {
    x: Math.abs(p1.x + p2.x) / 2,
    y: Math.abs(p1.y + p2.y) / 2
  };

}
let pointA = {
  x: x1,
  y: y1
};
let pointB = {
  x: x2,
  y: y2
};
let pointC = {
  x: x3,
  y: y3
};


let midPointA = midPoint(pointB, pointC);
context.strokeStyle = "white";
context.lineWidth = "1";

context.beginPath();
context.moveTo(pointA.x, pointA.y);
context.lineTo(midPointA.x, midPointA.y);
context.closePath();
context.stroke();

<canvas id="canvas" width="700" height="500" style="border:1px solid black;">
            Your browser does not support canvas.
        </canvas>

Answer 2

我不确定您是否需要 html 元素来完成您想要的，但如果您不需要它们，您可以单独在 js/canvas 中完成。这是静态的，但您可以在创建新实例时通过添加参数将点传递给构造函数，如果是三角形。

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;

class Triangle {
  constructor() {
    this.pointA = { x: 0, y: 50 };
    this.pointB = { x: 350, y: 75 };
    this.pointC = { x: 55, y: 250 };
  }
  draw() {
    ctx.beginPath();
    ctx.fillStyle = "violet";
    ctx.strokeStyle = "purple";
    ctx.lineWidth = 2;
    ctx.moveTo(this.pointA.x, this.pointA.y);
    ctx.lineTo(this.pointB.x, this.pointB.y);
    ctx.lineTo(this.pointC.x, this.pointC.y);
    ctx.lineTo(this.pointA.x, this.pointA.y);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
  }
  drawMedians() {
    ctx.beginPath();
    ctx.strokeStyle = "white";
    //PointA to opposite
    ctx.moveTo(this.pointA.x, this.pointA.y);
    ctx.lineTo(
      (this.pointB.x + this.pointC.x) / 2,
      (this.pointB.y + this.pointC.y) / 2
    );
    //PointB to opposite
    ctx.moveTo(this.pointB.x, this.pointB.y);
    ctx.lineTo(
      (this.pointA.x + this.pointC.x) / 2,
      (this.pointA.y + this.pointC.y) / 2
    );
    //PointC to opposite
    ctx.moveTo(this.pointC.x, this.pointC.y);
    ctx.lineTo(
      (this.pointA.x + this.pointB.x) / 2,
      (this.pointA.y + this.pointB.y) / 2
    );
    ctx.stroke();
    ctx.closePath();
  }
  drawCentroid() {
    let ox = ((this.pointA.x + this.pointB.x + this.pointC.x) / 3).toFixed(2);
    let oy = ((this.pointA.y + this.pointB.y + this.pointC.y) / 3).toFixed(2);
    ctx.fillStyle = "black";
    ctx.font = "20px Arial";
    ctx.fillText("centroid = x: " + ox + " y: " + oy, 10, 20);
  }
}

let triangle = new Triangle();

function draw() {
  triangle.draw();
  triangle.drawMedians();
  triangle.drawCentroid();
}
draw();

<canvas id="canvas"></canvas>

如何在 html canvas 中显示三角形的质心？

How to show triangle's centroid in html canvas?

html

javascript

html5-canvas