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只会乘以窗口大小来获取像素值。