Menu
专精于 HTML5 Canvas 网页与动画交互开发。创建高性能、视觉丰富的 Canvas 应用，包括粒子系统、数据可视化、交互式动画、游戏渲染等。当用户需要创建、修改或优化 Canvas 网页时调用此技能。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
分析 Git 提交记录并生成面向非技术用户的友好变更日志。当用户需要将技术性提交日志转换为易读的更新摘要、创建发布说明或向客户/利益相关者沟通产品变更时调用此技能。
数据库设计技能包，提供完整的数据库设计指导。适用于新建数据库、设计规范查询、数据库优化咨询等场景。
强制执行'先想清楚、再动手'工作流程。当任务涉及设计/架构决策、新功能实现、重构或任何需要规划的代码变更时调用此技能。
| 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/ 目录获取技术参考和最佳实践