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

标签 javascript html mobile canvas

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

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

最佳答案

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

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

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

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

关于javascript - HTML5 Canvas 可调整大小的多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12677361/

相关文章:

javascript - 如何动态创建多个可求和的变量

javascript - 使用 firebase 对数字进行排序

javascript - HTML & JS - 如何修改 CSS 类属性

javascript - 无 Action 的工作形式

javascript - 由于 Javascript 悬停效果,链接在移动设备上不起作用

html - Foundation 6 粘性布局在移动设备中损坏

javascript - Angular 2 - 组件无法正确呈现表格标签

javascript - 通过AngularJS将json格式转换为另一种json格式

jquery - 可折叠的标题菜单或在小屏幕中一个一个地排列按钮

android - 如何在不同的 Activity 调用上执行不同的功能?