Canvas、WebGL 与图像

接入方式

Canvas2D 与 WebGL 通过 KUI 的图形与脚本接口工作；它们的可用上下文、方法和限制需要分别查询，不能从浏览器同名 API 推断完整行为。SVG、位图、字体和动画资源也应在正式 SDK 包里验证。

约束和排错

图形更新要与文档帧生命周期一致。尺寸变化后核对绘制区域和输入坐标，加载失败时给出可识别状态；性能测试记录首用与连续更新两个阶段。不要用一张静态截图证明播放帧率。

Canvas 2D 的实际画面

SDK 的 Canvas 场景包含矩形、路径、曲线、渐变、描边与文本。这里使用原始 HTML 和 Lua 脚本，由 KUI 运行库加载并截图。

取得 2D 上下文

页面需要一个带 id=c1 的 canvas。Lua 通过 getContext("2d") 取得上下文；颜色使用属性赋值，绘制使用冒号方法调用。下面的代码取自 SDK 场景。

local c1 = document:getElementById("c1")
local ctx1 = c1:getContext("2d")
ctx1.fillStyle = "#e74c3c"
ctx1:fillRect(10, 10, 60, 40)
ctx1.strokeStyle = "#f1c40f"
ctx1.lineWidth = 3
ctx1:strokeRect(150, 10, 40, 100)

• Canvas 方法 →
• Canvas 示例 →

WebGL 与 3D 扩展

WebGL 上下文和 kui_ext_3d 是不同接入面。WebGL 面向着色器、缓冲区与绘制状态；独立 3D 扩展提供场景、资产和物理等更高层操作。上下文可用性取决于运行库构建与 GPU 环境。

• WebGL 接口 →
• 独立 3D 扩展 →

SVG、位图与动画资源

图像、SVG、Lottie 和 CSS 动画有各自的资源与更新路径。部署时包含所需文件，运行时检查缩放、裁剪、透明度和停止播放后的帧活动。某种格式可加载，不表示该格式的全部特性均与浏览器一致。

• SVG 接口 →
• Lottie 接口 →
• 动画接口 →

绘图前检查尺寸与坐标

按下面的顺序验证一个最小场景，再接入完整应用。

1. 先用固定尺寸绘制一个已知图形，确认画布确实可见。
2. 区分 CSS 显示尺寸和绘制缓冲尺寸，系统缩放变化后重新核对。
3. 动画只在需要时请求下一帧，隐藏或退出时取消持续工作。
4. WebGL 着色器编译错误、资源加载错误与布局问题分别排查。