HTML5 Canvas-畫出越來越粗的線的最簡單方法是什么？

Question

畫一條越來越粗的線最簡單的方法是什么？ 像這樣：

這是一個時鍾項目，所以我希望線x和y點不恆定，我的意思是線應該使用竇和余弦no ctx繞一個點旋轉。僅旋轉MATH。

簡而言之，如何使線繞黑點旋轉？

Answer 1

對於HTML5畫布（其原點位於左上角）， 從垂直方向順時針旋轉的點的一般公式為：

var x = cx + r * Math.sin(theta);
var y = cy - r * Math.cos(theta);

其中[cx, cy]是時鍾的中心點， theta以弧度為單位。

對於您的時鍾手柄，只需使用這些公式三（或四）次，具體取決於您希望手柄在點（即三角形）還是直線（即平行四邊形）處結束。

根據所需的時間計算theta ，然后針對所需的形狀針對每個點進行調整（並選擇合適的r ）。