测量 HTML 5 画布元素上的角度

measuring angles on HTML 5 canvas element?

本文关键字：元素 HTML 布元素 测量      更新时间：2023-09-26

在HTML5画布中实现（测量）角度时，尤其是在旋转对象之后，我感到困惑

假设我画了一个这样的形状 

ctx.moveTo(100,100)//center of canvas
ctx.lineTo(0,200)//left bottom
ctx.lineTo(200,200)//right bottom

我们知道它是一个 45 度或 pi*2/4 角。

但是我如何使用数学函数来查看形状是否旋转呢？以及如何在改变形状的x和y（第一点）后重新测量它？

首先，您需要确保点存储在某种数据结构中，因为从画布本身中提取点并不容易。类似于数组数组：

var angle = [[100,100], [0,200], [200,200]];

现在，您需要将线条转换为矢量：

var AB = [angle[1][0]-angle[0][0], angle[1][1]-angle[0][1]];
var BC = [angle[2][0]-angle[1][0], angle[2][1]-angle[1][1]];

现在找到两者的点积：

var dot_product = (AB[0]*BC[0]) + (AB[1]*BC[1]);//not dot-product

现在你需要找到向量的长度（大小）：

var ABmagnitude = Math.sqrt(Math.pow(AB[0],2) + Math.pow(AB[1],2));
var BCmagnitude = Math.sqrt(Math.pow(BC[0],2) + Math.pow(BC[1],2));
现在，您将点积

除以两个量级的乘积并得到arcosine，从而将它们放在一起：

var theta = Math.acos(dot_product/(ABmagnitude*BCmagnitude));
你提到了旋转，

但除非你只旋转一条线，否则角度将保持不变。

相关文章：