徐州网站Canvas动效的减少运动方案：保留内容，也给静态阅读路径

首页的动态视觉可以辅助表达，但读者也可能希望减少运动。徐州企业规划外贸独立站时，应让服务说明、联系与资料在没有动效的情况下仍然可用。下面的代码只说明控制思路，不代表已接入任何具体Canvas库或完成无障碍验收。

先把装饰运动与业务反馈分开

MDN介绍prefers-reduced-motion媒体特性，可根据用户设置调整体验。它只是一个输入条件，具体Canvas动画还需要由实现者处理循环。不能因为写了一段CSS，就假定脚本驱动的动画也已经停止。

CSS与脚本分别响应偏好

@media (prefers-reduced-motion: reduce) {
  .example-decorative-orbit { animation: none; }
}

const preference = matchMedia("(prefers-reduced-motion: reduce)");
function applyPreference() {
  // 按实际动画接口：停止或启动循环，并显示合适静态内容。
  // 不在这里调用不存在的通用Canvas停止方法。
  console.log({ reduceMotion: preference.matches });
}
preference.addEventListener("change", applyPreference);
applyPreference();

验收看能否完成阅读任务

1. 减少运动开启后，核心文字与联系入口仍可用。
2. 脚本与CSS分别测试，不只看按钮状态。
3. 切换偏好与重新进入页面都检查。
4. 静态替代不丢失关键解释，手机布局不被占位破坏。

若某项自动运动会持续影响阅读，还应评估实际暂停与控制方式，参考相关无障碍指导。不要把系统偏好当作唯一交互方案，也不通过缩小文字或遮住控件来为动效腾空间。减少运动不是减少信息，视觉方案需要服务于阅读。