在HTML 5 canvas元素上测量角度？

Question

在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后重新测量它（第一点）？

Answer 1

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

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));

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