메뉴
专精于 HTML5 Canvas 网页与动画交互开发。创建高性能、视觉丰富的 Canvas 应用，包括粒子系统、数据可视化、交互式动画、游戏渲染等。当用户需要创建、修改或优化 Canvas 网页时调用此技能。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
分析 Git 提交记录并生成面向非技术用户的友好变更日志。当用户需要将技术性提交日志转换为易读的更新摘要、创建发布说明或向客户/利益相关者沟通产品变更时调用此技能。
数据库设计技能包，提供完整的数据库设计指导。适用于新建数据库、设计规范查询、数据库优化咨询等场景。
强制执行'先想清楚、再动手'工作流程。当任务涉及设计/架构决策、新功能实现、重构或任何需要规划的代码变更时调用此技能。
SOC 직업 분류 기준
| name | HTML5 Canvas 网页与动画交互 |
| description | 专精于 HTML5 Canvas 网页与动画交互开发。创建高性能、视觉丰富的 Canvas 应用，包括粒子系统、数据可视化、交互式动画、游戏渲染等。当用户需要创建、修改或优化 Canvas 网页时调用此技能。 |
本技能专注于 HTML5 Canvas API 的高性能网页与动画交互开发。创建流畅、视觉震撼的 Canvas 应用，涵盖粒子系统、数据可视化、物理模拟、交互式动画和 2D 游戏渲染等场景。
当用户提供以下需求时调用此技能：
CanvasApplication
├── Renderer（渲染器）
│ ├── Canvas 上下文管理
│ ├── 高分屏适配
│ └── 渲染循环
├── Scene（场景）
│ ├── 实体列表
│ ├── 相机/视口
│ └── 层级管理
├── EntityManager（实体管理）
│ ├── 实体创建/销毁
│ ├── 组件系统（ECS）
│ └── 空间分区
├── InputHandler（输入处理）
│ ├── 鼠标/触摸事件
│ ├── 键盘事件
│ └── 手势识别
├── PhysicsEngine（物理引擎）[可选]
│ ├── 碰撞检测
│ ├── 力的模拟
│ └── 约束求解
└── AnimationController（动画控制器）
├── 动画状态
├── 缓动函数
└── 时间管理
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 高分屏适配
const dpr = window.devicePixelRatio || 1;
canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
ctx.scale(dpr, dpr);
let lastTime = 0;
function animate(currentTime) {
const deltaTime = (currentTime - lastTime) / 1000;
lastTime = currentTime;
update(deltaTime);
render();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
class Entity {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = 0;
this.vy = 0;
this.rotation = 0;
this.scale = 1;
this.opacity = 1;
this.active = true;
}
update(dt) {
this.x += this.vx * dt;
this.y += this.vy * dt;
}
render(ctx) {
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);
ctx.scale(this.scale, this.scale);
ctx.globalAlpha = this.opacity;
// 绘制逻辑
ctx.restore();
}
}
优先使用原生 API，减少依赖，提高性能和控制力。
完成开发后，提供：
参考资料目录 references/ 包含可选的参考文档和资源文件，用于增强技能的细节层次，并为实现提供额外的上下文或支持信息。
references/
├── 性能优化/
│ ├── 渲染优化技巧.md
│ └── 内存管理最佳实践.md
├── 动画与物理/
│ ├── 缓动函数参考.md
│ ├── 物理模拟公式.md
│ └── 粒子系统设计模式.md
├── 数据可视化/
│ ├── 图表类型选择指南.md
│ └── 色彩与数据可视化.md
├── 交互模式/
│ ├── 鼠标交互处理.md
│ └── 触摸与移动端适配.md
└── 案例分析/
├── 优秀 Canvas 项目拆解.md
└── 常见问题与解决方案.md
references/ 目录获取技术参考和最佳实践