HTML5 Canvas可調整大小的多邊形

Question

我需要根據屏幕寬度/高度調整大小的對角線多邊形顏色填充。綠色背景填充在這裏：http://rhiwifi.co/bus是一個使用旋轉DIV的原型。該DIV是屏幕的200％，因此它延伸超過了移動界面的界限，並且沒有正確填充屏幕底部。

如何繪製頂部對角線和底部矩形的可調整大小的多邊形？還是有更簡單的方法？

Answer 1

我只是將o座標存儲爲比例值，而不是絕對像素。

也就是說，我會使用範圍[0..1]中的數字來定義一個點。然後，您只需將此乘以畫布尺寸即可獲得像素尺寸。

例如，您想要繪製一個佔據畫布左上角1/4的矩形，因此定義它： 「0,0,0.5,0.5」 - 然後可以根據逗號分割數組。然後，您可以將數組中的每個元素乘以畫布大小以給出最終座標。

2d OpenGL視口，例如使用標準化的協調器，其中0,0是屏幕的中心，-1，-1左上角，1,1是右下角。這樣，openGL只是通過窗口大小乘以獲得像素值。