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只是通过窗口大小乘以获得像素值。