# 编程猫 Canvas→WebGL 转译加速器

## 原理

编程猫作品用 Canvas 2D 渲染（CPU），本脚本拦截 `getContext('2d')`，返回一个兼容代理对象，**所有 Canvas 2D 操作内部转译为 WebGL（GPU）执行**。

```
原作品代码 → canvas.getContext('2d') → 被拦截
                                      ↓
                          返回 Canvas2DProxy（兼容所有2D API）
                                      ↓
                          fillRect / drawImage / fill / stroke...
                                      ↓
                          内部全部转为 WebGL 绘制
                                      ↓
                          GPU 硬件渲染 🚀
```

## 转译对照

| Canvas 2D API | WebGL 转译方式 |
|---------------|---------------|
| `fillRect(x,y,w,h)` | 纯色四边形，直接顶点绘制 |
| `drawImage(img,...)` | 纹理采样四边形 |
| `fillText(text,x,y)` | 离屏Canvas渲染→纹理上传→四边形 |
| `fill()` (路径) | ear-clipping 三角化→三角形绘制 |
| `stroke()` (路径) | 粗线四边形近似 |
| `arc()` / `ellipse()` | 细分三角形扇 |
| `bezierCurveTo()` | 细分折线 |
| `save()` / `restore()` | WebGL 变换矩阵栈 |
| `clearRect()` | destination-out 混合 |
| `getImageData()` | gl.readPixels |
| `globalAlpha` | 顶点颜色 alpha 通道 |
| `globalCompositeOperation` | gl.blendFunc 切换 |

## 手机使用

1. 用支持油猴的手机浏览器（Kiwi / Firefox / X浏览器 / Alook）
2. 安装 Tampermonkey 或暴力猴
3. 新建脚本，粘贴 `userscript/codemao-canvas2webgl.user.js` 内容
4. 打开编程猫任意作品 → 自动 GPU 加速

## 书签脚本（最简单）

复制这段代码，保存为书签，在编程猫作品页面点击：

```
javascript:void(function(){var s=document.createElement('script');s.src='https://gitee.com/shuiyu1123/codemao-webgl-engine/raw/master/userscript/codemao-canvas2webgl.user.js';document.head.prepend(s);}());
```