UD5工具箱
Canvas（画布）
Canvas 是 HTML5 标准中提供的一个可用于绘制图形的 HTML 元素。它通过 JavaScript API 提供了一个像素级别的绘图接口，开发者可以在画布上绘制线条、矩形、圆形、文字以及进行图像处理等操作。本工具使用 Canvas 作为绘图引擎，通过监听鼠标和触摸事件获取用户的绘制输入，在画布上实时渲染笔画。Canvas 的优势在于高性能的 2D 渲染能力和灵活的像素级操作，非常适合实现交互式绘画应用。
笔画特征提取
笔画特征提取是从用户绘制的笔画中提取有意义的数学特征的过程。本工具提取的特征包括：线条密度（笔画像素占画布总像素的比例，反映绘画复杂度）、闭合曲线数量（通过边界追踪算法检测封闭形状，如圆形或椭圆）、笔画走向（分析主要线条的方向分布，通过方向直方图表示）。这些特征构成了一个特征向量，用于与目标词汇的特征库进行匹配计算。特征提取的准确性直接影响 AI 识别的效果。
闭合曲线检测
闭合曲线检测是一种图像分析技术，用于识别画布上是否存在首尾相连的封闭线条。在简笔画识别中，闭合曲线的数量是一个重要的特征：苹果、太阳、鸡蛋等物体通常包含一个或多个闭合曲线；房子、汽车等物体则可能包含多个闭合曲线组合。本工具通过边界追踪算法检测闭合曲线：首先找到笔画的端点，然后沿笔画路径追踪，如果路径回到起点附近，则判定为闭合曲线。这一特征帮助 AI 区分圆形物体和非圆形物体。
线条密度
线条密度是指笔画像素占画布总像素的比例，是衡量绘画复杂度的重要指标。简单的简笔画（如太阳）线条密度较低，而复杂的简笔画（如房子）线条密度较高。本工具通过计算笔画像素（非白色像素）与画布总像素的比值来得到线条密度。这一特征帮助 AI 判断用户绘制的是简单物体还是复杂物体，是匹配算法中的基础特征之一。线条密度过低可能导致 AI 难以识别，过高则可能表明绘画过于复杂。
特征匹配算法
特征匹配算法是将用户绘画的特征向量与预设的目标词汇特征库进行比较，计算匹配度的过程。本工具使用加权距离计算方法，对每个特征维度赋予不同的权重，计算用户特征与目标特征之间的距离。距离越小表示匹配度越高。算法会计算所有目标词汇的匹配度，然后按匹配度从高到低排序，返回前 5 个最可能的结果。这种基于特征匹配的方法模拟了真实机器学习中的最近邻分类器原理。
方向直方图
方向直方图是一种描述图像中线条方向分布的特征表示方法。它将 360 度的方向空间划分为若干个区间（如 8 个或 16 个区间），统计每个方向区间内的笔画像素数量，形成一个直方图向量。不同的物体具有不同的方向分布特征：太阳的光芒呈放射状分布，房子的线条以水平和垂直为主，鱼的身体以曲线为主。方向直方图能够有效捕捉这些方向特征，是笔画特征提取中的重要组成部分。
评分机制
评分机制是游戏的核心激励系统，根据 AI 猜测的准确度给予不同分值。评分规则：正确答案排在第 1 位得 150 分（最高识别准确度），排在第 2-3 位得 100 分（较高识别准确度），排在第 4-5 位得 60 分（基本识别），未识别得 10 分（鼓励参与）。此外还有连胜奖励：连续猜对会获得额外加分，激励用户保持高质量的绘画。评分机制的设计既考虑了识别准确度的差异，又通过鼓励分避免用户因识别失败而失去游戏兴趣。
Canvas 坐标系统
Canvas 使用二维笛卡尔坐标系，原点 (0,0) 位于画布左上角，X 轴向右递增，Y 轴向下递增。每个像素点由 (x, y) 坐标唯一标识。本工具通过 event.offsetX 和 event.offsetY 获取鼠标或触摸事件在画布上的精确坐标，用于绘制笔画。在移动端，还需要处理 touch 事件的坐标转换。Canvas 坐标系统的理解对于实现精确的绘画交互至关重要。
像素级图像分析
像素级图像分析是直接操作 Canvas 像素数据进行图像处理的技术。通过 Canvas 的 getImageData 方法，可以获取画布上每个像素的 RGBA（红、绿、蓝、透明度）值。本工具利用像素级分析来计算线条密度、检测闭合曲线、提取方向特征等。例如，通过遍历所有像素判断是否为笔画像素（非白色且非透明），可以统计笔画的覆盖范围和分布情况。像素级分析提供了最精确的图像信息，是特征提取的基础。
触摸事件处理
触摸事件是移动端浏览器提供的用户交互 API，包括 touchstart（手指接触屏幕）、touchmove（手指在屏幕上移动）、touchend（手指离开屏幕）等事件类型。本工具通过监听这些触摸事件获取用户的绘画输入，并将其转换为 Canvas 坐标进行绘制。在触摸事件处理中，需要使用 event.preventDefault() 阻止默认的滚动行为，确保绘画操作不会触发页面滚动。同时需要处理多点触控的情况，确保只响应单指绘画。
状态管理
状态管理是指在游戏运行过程中维护和更新各种游戏状态数据的过程。本工具需要管理的状态包括：当前目标词汇、倒计时时间、总分、连胜次数、当前轮次、画布历史（用于撤销功能）、AI 猜测结果等。这些状态数据存储在 JavaScript 变量中，并通过 DOM 操作实时更新到游戏界面上。良好的状态管理确保游戏逻辑的正确性和界面的一致性，是游戏开发中的核心设计之一。