-- FPS
快速开始：调用 G.open(w,h) 创建画布，G.run(fn) 启动游戏循环。fn 接收 dt（帧间隔秒）。在循环内写 JS 逻辑 + 调用绘制 API。触摸/键盘输入通过 G.touch / G.pressed(k) 读取。

v2.6 点击判断+判断检测+UI库V2大版本：修复输入框手机不弹键盘 (隐藏真实 input) + 修复手指未松开就触发点击 (改用 tapRelease 松开语义)。新增 点击判断系统 (tapDown/tapRelease/clickIn/clickInCircle/justPressed/justReleased/holdTime/tapCount/双击三击)、判断检测系统 (inRect/inCircle/inTriangle/inLine/rectOverlap/circleOverlap/onScreen/isVisible/closest/filterInRange/isNumber/isArray/chance)、UI 组件库 V2 (drawer/snackbar/pagination/breadcrumb/stepper/accordion/searchBox/numberInput/fab/toast2/calendar)。

v2.5：UI 组件库 V1 (panel/button/toggle/checkbox/radio/input/slider/tabs/menu/badge/chip/avatar/modal/colorPicker) + 文件持久化 + 设备适配。修复 toast 动画 bug。

v2.4：CSS 动画库 (22 个) + 高级形状 + 数学扩展 (perlin/damp) + 手势 + 音效扩展 + 调试性能。

v2.3：加载动画 / 浏览器检测 / 滑动列表 / 其他工具 — 修复 G.touch null bug。

v2.2：网络请求 / 网络图片 / 网络相关 / 交互动画 — 修复 FPS 显示 bug。

v2.1：★ 圆角矩形 ★ + 贝塞尔曲线 + 阴影/混合/裁剪/像素 + 信号系统 — 修复 11 bug。

v2.0：渐变 / 颜色混合 / 向量 / 缓动 / 镜头 / 物理 / 瓦片 / 对象池 — 60+ 接口。

JS 速查 写游戏必会

变量与常量
let score = 0 // 可重新赋值 const SPEED = 120 // 不可变，约定大写
游戏里位置、分数用 let；固定数值用 const。
函数
const move = (x, speed, dt) => x + speed * dt function reset() { score = 0; x = 160 }
箭头函数 => 适合简短逻辑；function 适合多行操作。
条件判断
if (G.touched) { x = G.touch.x } if (score > best) best = score let color = alive ? '#4ade80' : '#ef4444'
if/else 控制流程；三元 ? : 适合给变量赋两种值。
循环
for (let i = 0; i < 10; i++) { ... } enemies.forEach(e => { e.y += 1 })
for 适合已知次数；forEach 适合遍历数组每个元素。
数组
let arr = [1, 2, 3] arr.push(4) // 末尾添加 arr.filter(x => x > 0) // 过滤，返回新数组 arr.length // 元素个数
push 添加，filter 过滤掉不需要的元素——游戏里管理子弹、敌人最常用这两个。
对象
let player = { x: 160, y: 200, hp: 3 } player.x += 10 // 改属性 player.hp -= 1 // 扣血
游戏实体用对象组织属性：{ x, y, w, h, speed, alive }。
游戏循环模式
G.open(320, 400) let x = 160, vx = 100 G.run(dt => { // 1. 更新逻辑 x += vx * dt if (x > 300) vx = -100 // 2. 绘制画面 G.cls('#111') G.color('#4ade80') G.circ(x, 200, 10) })
每帧：先算（移动/碰撞/生成），再画（清屏+绘制）。dt 是上一帧到这帧的秒数，乘速度保证不同帧率下运动一致。

画布

G.open(w, h)初始化画布
G.cls(color)清屏并填充颜色
G.width画布宽
G.height画布高2.0

绘制 · 基础

G.color(c)同时设置填充/描边颜色
G.fill(c)仅设置填充色2.0
G.stroke(c)仅设置描边色2.0
G.lineWidth(w)线宽2.0
G.lineCap(c)线帽样式 round/square/butt2.0
G.rect(x,y,w,h)填充矩形
G.box(x,y,w,h)描边矩形
G.circ(x,y,r)填充圆
G.ring(x,y,rIn,rOut)圆环 (内径/外径)2.0
G.line(x1,y1,x2,y2)线段
G.polyline(pts)连续线段 pts=[[x,y],...]2.0
G.polygon(pts)填充多边形2.0
G.triangle(x1,y1,x2,y2,x3,y3)填充三角形2.0
G.ellipse(x,y,rx,ry)填充椭圆2.0
G.arc(x,y,r,a1,a2)圆弧 (角度制)2.0
G.star(x,y,r,points)星形 points=尖角数2.0
G.dashed(x1,y1,x2,y2,dash)虚线2.0
G.print(s,x,y,sz)绘制文字 (当前色)
G.text(s,x,y,sz,c)带颜色文字
G.textAlign(a)文字对齐 left/center/right
G.textBaseline(a)文字基线 top/middle/bottom2.0
G.font(f)设置字体
G.textWidth(s)测量文字宽度2.0
G.alpha(v)全局透明度 0~1
G.push() / G.pop()保存/恢复画布状态
G.translate(x,y)平移坐标系
G.rotate(rad)旋转坐标系
G.scale(sx,sy)缩放坐标系
G.resetTransform()重置变换矩阵2.0

渐变 v2.0+

G.gradLinear(x1,y1,x2,y2,stops)线性渐变 stops=[[pos,color],...]2.0
G.gradRadial(x,y,r0,r1,stops)径向渐变2.0
G.useGradient(grad)把渐变设为当前填充2.0

圆角矩形 ★ v2.1 · 终极的牛

圆角是 UI 美感的灵魂。三个核心 API + 圆角按钮，配合 shadow / clipRrect 可做出 iOS / Material 级别的卡片界面。
// 基础圆角矩形 (四角同半径) G.color('#7c9eff') G.rrect(20, 20, 200, 60, 12) // 描边圆角矩形 G.stroke('#fff') G.rbox(20, 100, 200, 60, 12) // 一步到位: 填充 + 描边 + 圆角 G.rrectEx(20, 180, 200, 60, '#1a1c2a', '#7c9eff', 12, 1.5) // 每角不同半径 [左上,右上,右下,左下] G.rrect(20, 260, 200, 60, [20, 4, 20, 4]) // 圆角按钮 (返回是否被点击) if (G.rbtn(80, 350, 160, 44, 'PLAY', 22)) { G.sfx(660, .08) }
G.rrect(x,y,w,h,r)★ 填充圆角矩形 r=数字或[tl,tr,br,bl]2.1
G.rbox(x,y,w,h,r)描边圆角矩形2.1
G.rrectEx(x,y,w,h,fill,stroke,r,lw)填充+描边一步到位2.1
G.rbtn(x,y,w,h,label,r)圆角按钮，点击返回 true2.1
G.clipRrect(x,y,w,h,r)圆角矩形裁剪2.1

曲线 / 高级绘制 v2.1+

G.bezier(x1,y1,cx1,cy1,cx2,cy2,x2,y2)三次贝塞尔曲线2.1
G.quadCurve(x1,y1,cx,cy,x2,y2)二次贝塞尔曲线2.1
G.spline(pts,tension)平滑曲线穿过所有点 (Catmull-Rom)2.1
G.arrow(x1,y1,x2,y2,head)带箭头的线段2.1
G.heart(x,y,size)心形 (表白专用)2.1

阴影 / 混合 / 裁剪 v2.1+

G.shadow(color,blur,ox,oy)开启阴影2.1
G.noShadow()关闭阴影2.1
G.blend(mode)混合模式 lighter/multiply/screen/difference2.1
G.clip(x,y,w,h)矩形裁剪2.1
G.clipCirc(x,y,r)圆形裁剪2.1
G.clipRrect(x,y,w,h,r)圆角矩形裁剪2.1
G.pixel(x,y,c)设置单个像素2.1
G.getPixel(x,y)读取像素 [r,g,b,a]2.1
G.snapshot()返回画布 dataURL2.1

颜色工具 v2.0+

G.rgb(r,g,b)RGB 转 #hex2.0
G.rgba(r,g,b,a)RGBA 字符串2.0
G.hsl(h,s,l)HSL 颜色2.0
G.hsla(h,s,l,a)HSLA 颜色2.0
G.mix(c1,c2,t)混合两色 t=0~12.0
G.fadeOut(c,t)向黑色渐变2.0
G.fadeIn(c,t)向白色渐变2.0
G.complement(c)补色2.0
G.randColor()随机柔和颜色

向量 v2.0+

G.vec(x,y)创建 {x,y}2.0
G.vecAdd(a,b)向量加2.0
G.vecSub(a,b)向量减2.0
G.vecMul(v,s)向量数乘2.0
G.vecLen(v)向量长度2.0
G.vecNorm(v)归一化2.0
G.vecDot(a,b)点积2.0
G.vecAngle(v)向量角度 (弧度)2.0
G.vecFromAngle(rad,len)由角度构造向量2.0
G.vecRotate(v,rad)旋转向量2.0

数学 v2.0+

G.map(v,a,b,c,d)值域映射 a~b → c~d2.0
G.deg2rad(d)角度→弧度2.0
G.rad2deg(r)弧度→角度2.0
G.angleTo(x1,y1,x2,y2)两点间角度2.0
G.sign(v)符号 -1/0/12.0
G.snap(v,step)对齐到网格2.0
G.round(v,n)保留 n 位小数2.0
G.sum(arr)数组求和2.0
G.avg(arr)数组平均2.0
G.range(n)生成 [0..n-1]2.0
G.dist(x1,y1,x2,y2)两点距离
G.clamp(v,lo,hi)限制范围
G.lerp(a,b,t)线性插值
G.angleLerp(a,b,t)角度插值 (正确处理环绕)2.1
G.moveToward(obj,tx,ty,max)朝目标匀速移动2.1
G.spring(obj,tx,ty,k,damp)弹簧物理2.1
G.noise(x,y)2D 伪噪声 [0,1]2.1
G.mod(a,b)数学取模 (始终非负)2.1
G.min(arr) / G.max(arr)数组最值2.1

信号系统 v2.1+

G.signal(name)创建/获取信号2.1
G.on(name,fn)订阅，返回取消函数2.1
G.emit(name,...args)触发信号2.1
G.off(name)清空某信号监听2.1

时间 v2.1+

G.now()当前时间戳 (毫秒)2.1
G.since(t)距 t 过了多少秒2.1
G.clock格式化运行时间 mm:ss.s2.1

私有 API v2.1 · 进阶

下划线前缀的 API属于内部 / 进阶用法，普通用户无需关心。但当你想做底层扩展或调试时很有用：
G._ensureCtx() // 确保画布已初始化，否则报错 G._lerpAngle(a, b, t) // angleLerp 别名 G._rgbToHex(255, 0, 0) // → '#ff0000' G._hexStr('red') // → '#ff0000' (任意颜色归一化) G._clone(obj) // 浅克隆 G._dt60 // 60fps 标准化 dt 倍数 (≈1 表示 60fps)
G._ensureCtx()确保画布已初始化2.1
G._lerpAngle(a,b,t)angleLerp 私有别名2.1
G._rgbToHex(r,g,b)RGB → #hex2.1
G._hexStr(c)任意颜色 → #rrggbb2.1
G._clone(o)浅克隆2.1
G._dt6060fps 标准化 dt 倍数2.1

随机 v2.0+

G.rnd(a,b)随机浮点 [a,b)
G.rndi(a,b)随机整数 [a,b]
G.rndPick(arr)数组随机取一项2.0
G.rndWeighted(items,weights)按权重随机2.0
G.rndSign()随机 -1 或 12.0
G.rndBool(p)概率 p 返回 true2.0
G.shuffle(arr)洗牌 (原数组)2.0

缓动 / 动画 v2.0+

G.tween(obj,props,dur,ease)属性动画 ease=函数名2.0
G.cancelTween(tw)取消动画2.1
G.delay(sec,fn)延时调用2.0
G.every(sec,fn)周期调用2.0
G.cancelTimer(t)取消延时/周期2.1
G.blink(period)本帧 true/false 交替2.0
G.pulse(speed)0~1 平滑振荡2.0
G.easeIn(t)缓入2.0
G.easeOut(t)缓出2.0
G.easeInOut(t)缓入缓出2.0
G.easeBounce(t)弹跳2.0
G.easeBack(t)回弹2.0
G.wave(freq,amp)正弦波
G.wrap(v,lo,hi)循环包裹

镜头 v2.0+

G.cam{x,y,zoom} 镜头对象2.0
G.camMove(x,y,spd)平滑移动2.0
G.camFollow(obj,spd)跟随对象2.0
G.camZoom(z,spd)缩放2.0
G.camShake(n)镜头震动2.0
G.screenShake(n)屏幕震动

物理 v2.0+

G.applyForce(obj,fx,fy)施加力 (累加加速度)2.0
G.applyGravity(obj,g)施加重力 g=加速度2.0
G.applyFriction(obj,f)摩擦 f=衰减系数2.0
G.bounceOff(obj,restitution)触地反弹2.0
G.physics(obj)更新 obj.x/y (需有 vx,vy)2.0

瓦片地图 v2.0+

G.tilemap(data,size)创建瓦片地图2.0
G.drawTilemap(map,colorMap)绘制 (key→color)2.0
G.getTile(map,gx,gy)取瓦片值2.0
G.setTile(map,gx,gy,v)设瓦片值2.0

对象池 v2.0+

G.pool(factory)创建对象池2.0
G.poolTake(pool)取出 (无则 factory 新建)2.0
G.poolReturn(pool,obj)归还2.0

特效

G.osc(x,y,r,spd)呼吸圆，半径正弦变化
G.grid(c,r,fn)遍历格子，fn(gx,gy,i)
G.particles(x,y,n)生成粒子，自动消散
G.drawGrid(size,color)绘制网格背景2.0
G.drawCross(x,y,size,c)绘制十字标记2.0

碰撞

G.hit(a,b)AABB碰撞 {x,y,w,h}
G.overlap(x1,y1,r1,x2,y2,r2)圆与圆碰撞
G.pick(x,y,rx,ry,rw,rh)点是否在矩形内
G.pointInPoly(x,y,pts)点是否在多边形内2.0

UI

G.btn(x,y,w,h,label)按钮组件，点击返回true
G.slider(x,y,w,val,min,max)滑块，返回新值2.0
G.progressBar(x,y,w,h,p)进度条 p=0~12.0

运动

G.follow(obj,tx,ty,spd)obj平滑追踪目标
G.lookAt(obj,tx,ty)转向目标 (设 obj.angle)2.0

循环

G.run(fn)启动循环，fn(dt)每帧调用
G.stop()停止循环
G.dt上一帧耗时（秒）
G.time游戏运行总时间
G.frame当前帧序号
G.fps实时帧率2.0

输入

G.keysSet 当前按下的键
G.pressed(k)键k是否按下
G.keyJustPressed(k)按下那帧 true2.0
G.keyJustReleased(k)抬起那帧 true2.0
G.key最后按下的键名
G.touch{x,y} 触摸/鼠标位置
G.touchesArray 所有触摸点
G.touched是否正在触摸
G.tap本帧是否刚点击
G.swipe{dx,dy,dir} 滑动方向2.0
G.anyKey()本帧是否按下任意键2.1
G.waitKey(k)等待某键被按下2.1

音效

G.sfx(freq,dur,type)合成音效 square/sawtooth/triangle/sine
G.melody(notes,tempo)播放旋律 [[freq,dur],...]2.0
G.mute()静音切换2.0

场景

G.scene(id,{init,loop})定义场景
G.go(id)切换到指定场景

存储

G.save(k,v)存到 localStorage
G.load(k)读取数据
G.clearSave()清空所有存档2.0

调试 v2.0+

G.log(...args)console.log 别名2.0
G.bench(fn,n)性能测试，返回 ms2.0

网络请求 v2.2+

HTTP 请求辅助。所有方法返回 Promise，失败时 resolve(null) 而非 reject，避免未捕获异常影响游戏循环。
⚠️ 跨域请求受浏览器 CORS 限制，目标服务器必须允许跨域。
// 异步获取 JSON (注意 await 必须在 async 函数内) G.run(async dt => { if (G.frame === 1) { const data = await G.getJSON('https://api.example.com/data') if (data) G.log('Got:', data) } G.cls('#000') G.text('loading...', 10, 30, 14, '#fff') })
G.fetch(url,opts)原生 fetch 包装，返回 Response 或 null2.2
G.get(url)GET 文本2.2
G.getJSON(url)GET 并解析 JSON2.2
G.post(url,data)POST JSON 返回文本2.2
G.postJSON(url,data)POST 并解析 JSON 响应2.2
G.httpStatus(url)HEAD 查询状态码，失败 -12.2

网络图片 v2.2+

异步加载 + 同步绘制。第一次调用 G.image(url,...) 时图片未加载，会自动后台加载并跳过本帧绘制；后续帧自动从缓存绘制。同一 URL 只加载一次。
// 同步绘制 (推荐用法) G.run(dt => { G.cls('#000') G.image('https://picsum.photos/200', 60, 100) // 第一次返回 false (图片还没好)，几帧后自动开始绘制 }) // 预加载多张图片，加载完成后再开始游戏 G.preloadImages([ 'https://picsum.photos/100/1', 'https://picsum.photos/100/2' ], () => { G.log('all loaded!') })
G.loadImage(url)异步加载，返回 Promise<Image>2.2
G.image(url,x,y,w,h)同步绘制 (自动缓存/加载)2.2
G.imageClip(url,sx,sy,sw,sh,dx,dy,dw,dh)九参裁剪绘制2.2
G.imageLoaded(url)检查是否已加载2.2
G.preloadImages(urls,fn)批量预加载2.2
G.clearImages()清空图片缓存2.2
G.spriteSheet(url,fw,fh)创建精灵表2.2
G.sprite(ss,idx,x,y,scale)从精灵表取一帧2.2

网络相关 v2.2+

G.online是否联网2.2
G.onOnline(fn) / G.onOffline(fn)联网/断网监听2.2
G.urlParam(name)取 URL 查询参数2.2
G.urlParams()取所有查询参数对象2.2
G.baseURL当前页面基础 URL2.2
G.openTab(url)新标签页打开2.2
G.redirect(url)当前页跳转2.2
G.download(name,content,type)触发文件下载2.2
G.share(data)Web Share 原生分享2.2
G.copy(text)复制到剪贴板2.2

交互动画 v2.2+

让 UI 活起来。状态全部挂在传入的 obj 上，无需手动管理。
// 可拖拽的卡片 let card = { x: 100, y: 100, w: 80, h: 80 } G.run(dt => { G.cls('#000') G.draggable(card) // 自动处理拖拽 let s = G.clickAnim(card) // 点击弹跳缩放 let off = G.shakeOffset(card) // 抖动偏移 G.push() G.translate(card.x + card.w/2 + off.x, card.y + card.h/2 + off.y) G.scale(s, s) G.rrectEx(-card.w/2, -card.h/2, card.w, card.h, '#7c9eff', '#fff', 10, 1) G.pop() if (G.hover(card)) G.tooltip(G.touch.x, G.touch.y, 'Drag me!') })
G.draggable(obj)可拖拽，本帧被拖返回 true2.2
G.dropTarget(x,y,w,h,obj)拖放目标检测2.2
G.hover(obj)是否悬停在 obj 上2.2
G.clickAnim(obj)点击弹跳缩放 1~1.152.2
G.tooltip(x,y,text)圆角提示框 (自动避让)2.2
G.cursor(type)鼠标样式 pointer/move/...2.2
G.pulseScale(speed)呼吸缩放 0.9~1.12.2
G.wobble(speed,amp)摆动角度2.2
G.float(speed,amp)上下浮动偏移2.2
G.breath(speed)0~1 呼吸值2.2
G.shakeObj(obj,n) / G.shakeOffset(obj)对象级抖动2.2
G.glow(x,y,r,color,i)发光圆 (径向渐变)2.2

预制加载动画 v2.3+

开箱即用的 loading 指示器，内部用 G.time 自动动画，无需手动管理。
G.run(dt => { G.cls('#000') G.color('#7c9eff') G.spinner(160, 100, 18) // 旋转弧 G.loadingDots(160, 160, 3) // 跳跃圆点 G.loadingBar(60, 200, 200, 6, -1) // 不确定进度条 G.loadingCircle(160, 280, 20, 0.6) // 圆形进度 60% G.loadingText(120, 340, '加载中') // 省略号动画 })
G.spinner(x,y,r,color,speed)旋转弧形 spinner2.3
G.loadingDots(x,y,count,color,speed)跳跃圆点2.3
G.loadingBar(x,y,w,h,progress,color)进度条 (负数=不确定)2.3
G.loadingCircle(x,y,r,progress,color)圆形进度环2.3
G.skeleton(x,y,w,h,r)骨架屏闪烁块2.3
G.loadingText(x,y,text,speed)省略号动画文字2.3

浏览器检测 v2.3+

G.isMobile是否手机2.3
G.isTouch是否触屏设备2.3
G.isDesktop是否桌面端2.3
G.isIOS / G.isAndroidiOS / Android2.3
G.isChrome / isFirefox / isSafari / isEdge / isWeChat浏览器类型2.3
G.os操作系统名 (iOS/Android/macOS/Windows/Linux)2.3
G.browserName浏览器名2.3
G.screenW / G.screenH屏幕物理尺寸2.3
G.pixelRatio设备像素比2.3
G.viewport{w,h} 视口尺寸2.3
G.landscape / G.portrait横屏 / 竖屏2.3

滑动列表 v2.3+

带惯性 + 边界回弹的滚动容器。支持鼠标拖拽和触摸滑动。
// 创建滚动器 let sc = G.scroller(20, 60, 280, 300) let items = G.range(50).map(i => 'Item ' + i) G.run(dt => { G.cls('#000') // 一行搞定滚动列表！ G.scrollList(sc, items, 50, (item, x, y, w, h, i) => { G.rrectEx(x+4, y+4, w-8, h-8, '#1a1c2a', '#333', 8, 1) G.text(item, x+16, y+h/2+6, 16, '#fff') }) })
G.scroller(x,y,w,h)创建滚动状态对象2.3
G.scrollContent(sc,h)设置内容高度2.3
G.updateScroll(sc)每帧更新 (惯性+回弹)2.3
G.clipScroll(sc)裁剪+平移坐标系2.3
G.scrollbar(sc,color)绘制滚动条2.3
G.scrollList(sc,items,h,fn)★ 一行搞定滚动列表2.3

其他工具 v2.3+

G.format(n,digits)数字格式化 (K/M/B)2.3
G.pad(n,len,char)补零/补字符2.3
G.uuid()生成 UUID v42.3
G.hash(str)字符串哈希 (djb2)2.3
G.template(str,data){{key}} 模板替换2.3
G.debounce(fn,sec) / G.throttle(fn,sec)防抖 / 节流2.3
G.once(fn) / G.memoize(fn)只执行一次 / 记忆化2.3
G.queue() / G.stack()FIFO 队列 / LIFO 栈2.3
G.wait(sec)Promise 延时 (async 用)2.3
G.colorName(hex)取最接近的中文颜色名2.3

CSS 动画 v2.4 · UI 增强

给页面元素加 class 即可触发动画。无需 JS，纯 CSS 实现。
// 在 HTML 元素上加 class <div class="anim-bounce">弹跳</div> <button class="anim-pulse">呼吸</button> <div class="anim-fade-in delay-2">延迟 0.2s 淡入</div> // JS 动态添加 document.querySelector('.btn').classList.add('anim-shake')
.anim-fade-in / .anim-fade-out淡入 / 淡出2.4
.anim-slide-up/down/left/right滑入2.4
.anim-zoom-in / .anim-zoom-out缩放弹入 (带回弹)2.4
.anim-bounce弹跳2.4
.anim-pulse呼吸缩放 (循环)2.4
.anim-spin旋转 (循环)2.4
.anim-shake左右抖动2.4
.anim-glow发光呼吸 (循环)2.4
.anim-float上下浮动 (循环)2.4
.anim-wiggle左右摆动 (循环)2.4
.anim-flip / .anim-flip-x3D 翻转 Y/X 轴2.4
.anim-heartbeat心跳 (循环)2.4
.anim-rubber橡皮筋2.4
.anim-swing钟摆2.4
.anim-flash / .anim-tada闪烁 / 张狂2.4
.anim-fast / .anim-slow / .anim-paused速度控制2.4
.delay-1 ... .delay-5延迟 0.1s~0.5s2.4

高级形状 v2.4+

G.path(fn) / G.pathStroke(fn)自定义路径2.4
G.regularPolygon(x,y,r,sides,rot)正多边形2.4
G.gear(x,y,r,teeth)齿轮2.4
G.cloud(x,y,r)云朵2.4
G.bubble(x,y,r)气泡 (带高光)2.4
G.checkmark(x,y,size,color)勾号2.4
G.cross(x,y,size,color)X 叉号2.4
G.capsule(x,y,w,h)胶囊形2.4
G.speech(x,y,w,h,tail)对话气泡2.4

数学扩展 v2.4+

G.smoothstep(t) / G.smootherstep(t)平滑阶跃2.4
G.damp(cur,tgt,lambda,dt)帧率无关阻尼2.4
G.fract(v)取小数部分2.4
G.gcd(a,b) / G.lcm(a,b)最大公约数 / 最小公倍数2.4
G.isPrime(n)是否质数2.4
G.fib(n) / G.factorial(n)斐波那契 / 阶乘2.4
G.perlin(x,y)2D Perlin 噪声 (平滑)2.4
G.invertColor(c) / G.grayscale(c)反色 / 灰度化2.4
G.brightness(c,factor)调亮/调暗2.4
G.withAlpha(c,a)加透明度2.4

手势 / 高级输入 v2.4+

G.doubleClick(obj,interval)双击检测2.4
G.longPress(obj,duration)长按检测2.4
G.pinch()双指捏合 {scale,rotation}2.4
G.isPressed(x,y,w,h)区域是否被按下 (持续)2.4
G.isClicked(x,y,w,h)区域是否被点击 (本帧)2.4
G.clicked(obj)obj 是否被点击2.4
G.onKeyDown(key,fn)注册按键回调2.4

音效扩展 v2.4+

G.tone(freq,dur,type,vol)带音量的 tone2.4
G.chord(freqs,dur,type)和弦 (同时多频)2.4
G.sweep(f1,f2,dur,type)频率扫描2.4
G.noise(dur,vol)白噪声 (爆炸/雨声)2.4
G.setMuted(m) / G.isMuted静音控制2.4

调试 / 性能 v2.4+

G.debug(key,value)设置调试信息2.4
G.drawDebug()绘制调试面板2.4
G.profile(name,fn)性能测试2.4
G.watch(name,value)限频 log 变量2.4
G.stats()引擎统计信息2.4

UI 组件库 ★ v2.5 · 高自由度

即时模式 UI 组件库。每帧调用自动处理交互，所有组件支持 opts 自定义颜色/样式/行为。
// 面板 + 按钮 + 开关 + 滑块 G.panel(10, 10, 300, 200, { title: 'Settings', shadow: 8 }) let on = G.toggle(30, 60, on, { label: 'Sound' }) let vol = G.sliderH(30, 100, 200, vol, 0, 100, { showValue: true }) if (G.button('OK', 200, 150, 80, 30, { fill: '#4ade80', glow: true })) { G.sfx(880, .1) }
G.uiReset()每帧开始重置 UI id2.5
G.panel(x,y,w,h,opts)面板 (标题栏/阴影/圆角)2.5
G.label(text,x,y,opts)富文本标签2.5
G.button(text,x,y,w,h,opts)★ 高自由度按钮 (glow/shadow/disabled)2.5
G.toggle(x,y,on,opts)开关 (平滑动画)2.5
G.checkbox(x,y,checked,opts)复选框2.5
G.radio(x,y,value,cur,opts)单选按钮2.5
G.input(x,y,w,opts)★ 文本输入框 (光标/密码/占位)2.5
G.sliderH(x,y,w,v,min,max,opts)水平滑块 (showValue/step)2.5
G.sliderV(x,y,h,v,min,max,opts)垂直滑块2.5
G.tabs(x,y,w,tabs,cur,opts)标签页2.5
G.menu(x,y,items,opts)下拉菜单2.5
G.badge(x,y,text,opts)徽章2.5
G.chip(x,y,text,opts)可删除标签2.5
G.avatar(x,y,r,opts)头像 (状态点/边框)2.5
G.divider(x,y,w,opts)分隔线 (水平/垂直)2.5
G.iconBtn(x,y,size,icon,opts)图标按钮2.5
G.progress(x,y,w,h,value,opts)进度条 (条纹/动画)2.5
G.tooltip2(x,y,text,opts)增强 tooltip (箭头)2.5
G.modal(title,body,opts)★ 模态对话框2.5
G.colorPicker(x,y,color,opts)★ HSV 颜色选择器2.5

文件 / 持久化 v2.5+

G.readFile(accept)选择文件读文本2.5
G.readImageFile()选择图片文件加载2.5
G.saveFile(name,content,type)保存文件到本地2.5
G.storage(key,value)通用存取 (read/write/delete)2.5

设备 / 屏幕适配 v2.5+

G.fitCanvas()画布自适应父容器2.5
G.safeArea安全区域 {top,right,bottom,left}2.5
G.lockOrientation(orient)锁定屏幕方向2.5
G.fullscreen(elem)切换全屏2.5
G.wakeLock()屏幕常亮 (防息屏)2.5
G.vibrate(pattern)震动 (移动端)2.5

生命周期 / 事件 v2.5+

G.onResume(fn) / G.onPause(fn)页面可见/隐藏回调2.5
G.onResize(fn)窗口大小变化回调2.5
G.visible页面是否可见2.5

点击判断 ★ v2.6 · 精确点击

区分按下 / 持续按住 / 松开三种状态。修复"手指未松开就触发"的 bug。
// 旧方式 (可能误触): 手指一按下就触发 if (G.tap && G.hover(btn)) { ... } // ★ 新方式 (推荐): 手指松开才触发，真正的"点击完成" if (G.clickIn(btn.x, btn.y, btn.w, btn.h)) { ... } // 检测双击 if (G.isDoubleClick(0.3)) { ... } // 检测长按 if (G.isHolding(0.5)) { ... }
G.tap (旧) = 按下瞬间触发 (向后兼容保留)
G.tapRelease (新) = 松开瞬间触发 (推荐)
G.clickIn = 按下+松开都在区域内才算点击 (最严格)
G.tapDown本帧刚按下2.6
G.tapRelease★ 本帧刚松开 (推荐)2.6
G.tapDownPos / G.tapReleasePos按下/松开位置2.6
G.pressDuration当前按住时长 (秒)2.6
G.clickIn(x,y,w,h)★ 区域内完成点击 (按下+松开都在内)2.6
G.clickInCircle(x,y,r)圆形区域内完成点击2.6
G.clickOut(x,y,w,h)区域外完成点击 (失焦用)2.6
G.clickInObj(obj)obj 上完成点击2.6
G.isDown(x,y,w,h)区域是否正在被按下 (持续)2.6
G.isDownObj(obj)obj 是否正在被按下2.6
G.justPressed(x,y,w,h)本帧刚按下且在区域内2.6
G.justReleased(x,y,w,h)本帧刚松开且在区域内2.6
G.holdTime() / G.isHolding(sec)按住时长 / 是否按住超过 sec 秒2.6
G.tapCount(interval)连续点击计数2.6
G.isDoubleClick / isTripleClick双击 / 三击检测2.6
G.dragStart(obj) / G.dragEnd()拖拽开始 / 结束2.6
G.showKeyboard(text) / hideKeyboard★ 弹出/收起手机键盘2.6
G.keyboardVisible键盘是否可见2.6

判断 / 检测 v2.6+

G.inRect(px,py,x,y,w,h)点是否在矩形内2.6
G.inCircle(px,py,cx,cy,r)点是否在圆内2.6
G.inEllipse(px,py,cx,cy,rx,ry)点是否在椭圆内2.6
G.inTriangle(px,py,...)点是否在三角形内2.6
G.inLine(px,py,x1,y1,x2,y2,t)点是否在线段附近2.6
G.rectOverlap(a,b)两矩形是否重叠2.6
G.circleOverlap(...)两圆是否重叠2.6
G.rectCircleOverlap(...)矩形与圆是否重叠2.6
G.lineOverlap(...)两线段是否相交2.6
G.onScreen(x,y,w,h)矩形是否在画布内2.6
G.pointOnScreen(x,y)点是否在画布内2.6
G.isVisible(obj,cam)obj 是否在镜头可见范围2.6
G.distanceTo(x,y,obj) / angleToObj到 obj 的距离/角度2.6
G.closest(arr,x,y)找最近的元素2.6
G.filterInRange(arr,x,y,range)筛选范围内元素2.6
G.isEmpty / isNumber / isString / isArray / isFunction类型判断2.6
G.inRange(v,min,max)值是否在范围内2.6
G.isEven(n) / isOdd(n)偶数 / 奇数2.6
G.chance(p)概率判断 (p=0~1)2.6

UI 组件库 V2 ★ v2.6 · 更强大

G.drawer(side,w,h,open,opts)抽屉 (侧边滑出)2.6
G.snackbar(text,opts)底部通知条 (自动消失)2.6
G.pagination(x,y,w,cur,total,opts)分页器2.6
G.breadcrumb(x,y,items,opts)面包屑导航2.6
G.stepper(x,y,w,v,min,max,step,opts)数字步进器2.6
G.accordion(x,y,w,items,openIdx,opts)手风琴2.6
G.searchBox(x,y,w,value,opts)搜索框 (带清除)2.6
G.numberInput(x,y,w,value,opts)数字输入2.6
G.fab(x,y,r,icon,opts)浮动操作按钮2.6
G.toast2(text,opts)画布内 toast2.6
G.calendar(x,y,w,year,month,day,opts)日历2.6

主题系统 ★ v2.7 · UI 换肤

一键切换 UI 主题。8 套内置主题，告别只有蓝色。
// 切换主题 G.theme('ocean') // 海洋蓝青 G.theme('sunset') // 日落橙 G.theme('forest') // 森林绿 G.theme('cyberpunk') // 赛博朋克粉 G.theme('monokai') // 编辑器经典 // 在组件里用主题色 G.button('OK', 100, 100, 80, 30, { fill: G.t('primary'), // 主题主色 textColor: G.t('text') // 主题文字色 }) // 自定义主题 G.theme({ primary: '#ff00ff', accent: '#00ff00' })
G.theme(name)★ 切换主题 (8 套内置)2.7
G.themeColors()获取当前主题色对象2.7
G.themes()列出所有主题名2.7
G.t(key)★ 取主题色 (primary/accent/success/danger/bg/surface/text)2.7
G.localX / G.localY / G.screenX / G.screenY坐标转换 (滚动列表内)2.7

网络请求扩展 v2.7+

G.put(url,data) / G.patch(url,data) / G.del(url)PUT/PATCH/DELETE 请求2.7
G.putJSON / G.patchJSONPUT/PATCH 解析 JSON2.7
G.uploadFile(url,file,onProgress)★ 上传文件带进度2.7
G.downloadFile(url,onProgress)★ 下载文件带进度2.7
G.jsonp(url,callbackParam)JSONP 跨域请求2.7
G.websocket(url)WebSocket 连接2.7
G.eventSource(url)SSE 服务端推送2.7
G.request(method,url,opts)通用请求 (支持 blob/arrayBuffer)2.7
G.setHeaders(headers) / G.formData()默认请求头 / FormData2.7

网络图片扩展 v2.7+

G.imageFilter(url,filter,opts)★ 滤镜 (grayscale/sepia/blur/invert/bright...)2.7
G.imageTint(url,color,x,y,w,h)着色绘制2.7
G.imageRotate(url,x,y,angle,w,h)旋转绘制2.7
G.imageAlpha(url,x,y,alpha,w,h)带透明度绘制2.7
G.imageFlip(url,x,y,flipX,flipY,w,h)翻转绘制2.7
G.imageNine(url,x,y,w,h,inset)九宫格绘制 (可缩放 UI)2.7

网络视频 ★ v2.7 · 新分类

在画布上绘制视频帧。支持播放/暂停/跳转/音量控制。
// 加载并播放视频 G.loadVideo('https://example.com/video.mp4', { muted: true, loop: true }) G.videoPlay('https://example.com/video.mp4') G.run(dt => { G.cls('#000') // 绘制视频当前帧 G.video('https://example.com/video.mp4', 20, 20, 280, 200) // 显示进度 G.text(G.videoTime('...') + ' / ' + G.videoDuration('...'), 20, 240, 14, '#fff') })
G.loadVideo(url,opts)加载视频 (muted/loop/autoplay)2.7
G.video(url,x,y,w,h)★ 绘制视频当前帧2.7
G.videoPlay(url) / G.videoPause(url)播放 / 暂停2.7
G.videoSeek(url,time)跳转到指定时间2.7
G.videoTime(url) / G.videoDuration(url)当前时间 / 总时长2.7
G.videoVolume(url,vol) / G.videoMute(url,muted)音量 / 静音2.7
G.videoPaused(url) / G.videoEnded(url)是否暂停 / 结束2.7
G.clearVideos()清空视频缓存2.7