HTML5极坐标图片变换是通过Canvas 2D手动实现的坐标映射：将笛卡尔坐标(x,y)转为极坐标(r,θ)，再反向采样原图像素，需用getImageData/putImageData逐像素控制，非CSS或SVG内置功能。
什么是 HTML5 极坐标图片变换
HTML5 本身没有直接叫「极坐标变换」的 API，所谓效果其实是用 Canvas 2D 手动实现坐标映射：把笛卡尔坐标系（x, y）上的像素，按极坐标公式 r = √(x²+y²)、θ = atan2(y, x) 转换，再反向采样回原图。本质是自定义图像重采样，不是 CSS 或 SVG 内置功能。
用 canvas.getContext('2d') 做极坐标扭曲的关键步骤
核心是遍历目标画布每个像素点 (u, v)，把它当作极坐标系下的 (r, θ)，再换算成原图中的 (x, y) 坐标，取色填充。注意必须用 getImageData/putImageData 才能逐像素控制，drawImage 无法满足这种非线性映射。
- 先用
ctx.getImageData(0, 0, width, height)获取原图像素数据（需提前用drawImage把图片绘入隐藏 canvas） - 对目标 canvas 每个 (u, v)，平移到中心：dx = u - cx, dy = v - cy
- 转极坐标：
r = Math.sqrt(dx*dx + dy*dy)，theta = Math.atan2(dy, dx) - 映射回原图：x = cx + r * Math.cos(theta + offset)，y = cy + r * Math.sin(theta + offset)（可加旋转/缩放偏移）
- 用双线性插值或最近邻采样从原图取色，写入目标
ImageData
requestAnimationFrame 下实时极坐标动画的性能陷阱
每帧都做全图逐像素计算（尤其 >500×500）极易掉帧。Chrome DevTools 中常看到 putImageData 占用大量主线程时间。真实项目中必须做三件事：
- 限制处理区域：只对「可见变形区」（如圆盘内）循环，跳过外圈空白
- 降采样处理：用
OffscreenCanvas（需检查浏览器支持）或缩小临时 canvas 尺寸再放大渲染 - 避免重复创建
ImageData：复用同一实例，仅修改.data数组内容 - 慎用
Math.sin/Math.cos：循环内频繁调用开销大，可预生成 theta 查表（若角度范围固定）
常见错误：图片跨域导致 getImageData 报错 SecurityError
本地文件（file:// 协议）或未配 CORS 的远程图，读取像素时会触发安全限制，报错信息是 Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.。解决路径只有两条：
立即学习“前端免费学习笔记（深入）”；
-
后端图服务返回
Access-Control-Allow-Origin: *头，并在img标签加crossOrigin="anonymous" - 开发阶段用本地 HTTP 服务（如
npx serve）替代直接双击 HTML 文件 - 绝对不要尝试用
toDataURL中转绕过——只要图源跨域，结果依然被污染
极坐标变换的边界模糊、径向拉伸失真、中心点采样噪声等问题，往往不是算法错，而是坐标偏移没对齐或插值方式太粗糙。动手前先确认你的「中心点」是否和 canvas 坐标系原点一致，这点容易被忽略。
