← 返回实验首页
A
B
C
D
E
Task D · WebGL 交互绘图板
通过鼠标事件和坐标转换创建点、线段与矩形。
图形由 WebGL 2.0 渲染;控件由 HTML 提供。
绘图工具
点
线段(两次点击)
矩形(两次点击)
新图形颜色
清空
等待点击
切换工具会取消尚未完成的两次点击。对象保存在 JavaScript 内存中。
实现说明:
程序用
getBoundingClientRect()
抵消页面缩放,再把像素坐标转换为 NDC 并翻转Y轴。每次变化后从
objects
重整并上传有效顶点;保留对象数据便于重绘、清空和后续编辑。