Canva导出JSON坐标与CSS不一致，因采用左上原点、y向下增长的坐标系，且y为元素中心纵坐标，需用top = y - height / 2换算；还需考虑画布缩放、偏移及Retina（2x）导出三重影响，须通过canvasWidth与目标容器宽度计算缩放比后映射，并处理字段缺失、浮点精度和高DPI渲染模糊等问题。
Canva导出JSON里的坐标为什么和CSS不一致
Canva使用的是左上角为原点、y轴向下增长的坐标系，但它的元素top和height在导出JSON中并不直接对应CSS的top和height——因为Canva画布有缩放、画布偏移、导出分辨率缩放（如2x）三重影响。最常见现象是：PHP解析后用top值直接设CSS top，结果元素整体下移或错位。
- 导出JSON中的
y字段是元素中心点纵坐标（非顶部），且单位是“画布像素”，不是CSS像素 - 需结合
height和y反推顶部位置：top = y - height / 2 - 若导出时选了“Retina (2x)”，所有坐标值会翻倍，但
width/height也同步翻倍，不能简单除2——要查JSON根级scale或exportSettings字段确认 - PHP里用
json_decode($json, true)后，注意y可能是浮点数，直接转整型会截断，建议保留小数或四舍五入到1位
PHP解析Canva JSON并转换为CSS定位的典型流程
核心不是“读取然后赋值”，而是做三层映射：Canva画布坐标 → 导出视口坐标 → 目标容器CSS坐标。关键变量是目标容器宽度（比如800px宽的预览区）与Canva原始画布宽度（如1200）的比例。
- 先从JSON中提取
canvasWidth（常在page或design层级）和目标容器CSS宽度（如$containerWidth = 800） - 计算缩放比：
$scale = $containerWidth / $canvasWidth（注意：不是用width字段，那是元素自身宽） - 对每个元素：
$cssTop = round(($element['y'] - $element['height'] / 2) * $scale, 1);$cssLeft = round(($element['x'] - $element['width'] / 2) * $scale, 1); - 若JSON含
rotation，CSS需额外加transform: rotate()，但注意Canva的旋转中心默认是元素中心，和CSS默认一致，可直接用
遇到undefined index: x或NaN报错怎么办
Canva导出JSON结构不稳定：文字图层可能用textX/textY，图片用x/y，而组元素（type === 'group'）的坐标藏在子元素里，甚至某些模板导出连x字段都不写，默认为0但PHP会报undefined index。
- 务必用
isset()或空合并操作符：$x = $element['x'] ?? 0;，别直接访问$element['x'] - 对
type === 'text'，优先尝试textX和textY，fallback到x/y - 计算前检查是否为数字：
is_numeric($element['y']) && is_numeric($element['height'])，避免NaN * $scale导致整个CSS值失效 - Canva有时把背景图当作独立图层但
width/height为null，需跳过或设默认值
PHP生成的CSS定位在高DPI设备上模糊
不是PHP的问题，是输出后浏览器渲染时像素对齐失败。根源在于：PHP算出的$cssTop可能是42.6px，而CSS像素在Retina屏上需要整数物理像素才能清晰，42.6px会被浏览器插值渲染，边缘发虚。
立即学习“PHP免费学习笔记（深入）”；
- 简单方案：统一四舍五入到整数：
round($cssTop)，牺牲一点精度换清晰度 - 更准的做法：用
getimagesize()读取导出PNG的实际尺寸，反推逻辑像素比，再调整缩放比（例如PNG是1600×1200，容器是800×600，则真实缩放比是2，此时CSS用px单位即可，无需rem或vw） - 避免在PHP里拼接
style="top: <?php echo $cssTop; ?>px"，改用CSS class + data属性，让JS在客户端做最后的亚像素微调（如监听window.devicePixelRatio）
实际处理时，最易被忽略的是Canva不同导出方式（“Download as JSON” vs “Publish to Web”获取的JSON）结构差异极大，同一个设计，前者有完整pages数组，后者可能只有一层elements且无canvasWidth字段——得先判断JSON来源再决定解析路径。
