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

你提到的旋轉，但除非你只旋轉一條線，角度將保持相同。