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視口使用標准化的co-ords，其中0,0是屏幕的中心，-1，-1是左上角，1,1是右下角。 這樣，openGL只是乘以窗口大小來獲取像素值。