如何在 html canvas 中顯示三角形的質心？
[英]How to show triangle's centroid in html canvas?
問題描述
我試圖通過顯示從頂點到對邊中點的直線來顯示三角形的質心，如下圖所示
這是我能夠在 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>
2 個解決方案
解決方案1
1 已采納 2021-05-21 14:49:58
顯示質心實際上與您已經在做的事情並不太遠。 “最難”的部分是計算給定邊的中點。
讓我們看看下面的插圖。
從上面我們可以看出A點的對面是a ，它由B點和C組成。 計算直線的中點就像將起點和終點的水平/垂直 position 相加，最后將結果除以 2 一樣簡單。
更數學地說：
在我們得到中點的 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>
解決方案2
1 2021-05-21 22:23:07
我不確定你是否需要 html 元素來完成你想要的，但如果你不需要它們，你可以單獨在 js/canvas 中完成。 這是 static 但您可以在創建三角形的新實例時通過添加 arguments 將點傳遞給構造函數。
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 樹中顯示三角形圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.