javascript - HTML5 Canvas 可调整大小的多边形

Question

我需要一个基于屏幕宽度/高度调整大小的对角多边形颜色填充。这里的绿色背景填充：http ://rhiwifi.co/bus是一个使用旋转 DIV 的原型。该 DIV 是屏幕的 200%，因此它超出了移动界面的边界，并且没有正确填充屏幕底部。

如何绘制一个可调整大小的多边形，顶部是对角线，底部是矩形？或者有没有更简单的方法？

Answer 1

我只是将纵坐标存储为比例值，而不是绝对像素。

也就是说，我会使用 [0..1] 范围内的数字来定义一个点。然后，您只需将其乘以画布尺寸即可获得像素尺寸。

例如，您想绘制一个占据画布左上角 1/4 的矩形，因此定义它：“0,0,0.5,0.5” - 然后您可以根据逗号拆分为一个数组。然后，您可以将数组中的每个元素乘以画布大小，以获得最终坐标。

例如，2d OpenGL 视口使用标准化坐标，其中 0,0 是屏幕的中心，-1,-1 是左上角，1,1 是右下角。这样，openGL 只需乘以窗口大小即可获得像素值。