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

Question

我需要一个对 Angular 多边形颜色填充，根据屏幕宽度/高度调整大小。此处绿色背景填充:http://rhiwifi.co/bus是一个使用旋转 DIV 的原型(prototype)。该 DIV 占屏幕的 200%，因此它超出了移动界面的边界，并且无法正确填充屏幕底部。

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

Answer 1

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

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

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

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