Canvas 无法在 AJAX 动态加载后绘制的解决方案-js教程-PHP中文网

Canvas 无法在 AJAX 动态加载后绘制的解决方案

AJAX 加载 HTML 片段时，其中内联的标签不会自动执行，导致依赖 DOM 的 Canvas 绘图逻辑失效；需通过动态创建元素或手动执行脚本确保绘图函数正确调用。

ajax 加载 html 片段时，其中内联的 `<script>` 标签不会自动执行，导致依赖 dom 的 <a style="color:#f60; text-decoration:underline;" title= "canva"href="https://m.php.cn/zt/110101.html" target="_blank">canvas 绘图逻辑失效；需通过动态创建元素或手动执行脚本确保绘图函数正确调用。</script>

在使用 AJAX（如原生 XMLHttpRequest）动态更新页面内容时，一个常见却容易被忽视的问题是：通过 innerHTML 插入包含 。这是因为浏览器仅执行初始 HTML 解析阶段遇到的 <script>，而通过 innerHTML 或 insertAdjacentHTML 动态写入的脚本标签默认被忽略——这是规范行为，并非 Bug。</script>

你当前的 PHP 输出类似：

<canvas id="statsID123"></canvas><script>funStats('statsID123', 100, 85, 90, 75, 95, 80);</script>

这段代码被 document.getElementById('results').innerHTML = ... 插入后，

✅ 正确解决方案：避免内联脚本，改用 DOM 驱动初始化

最健壮、可维护且符合现代实践的做法是：PHP 只输出结构化 HTML（如带数据属性的 。

✅ 推荐做法（推荐指数 ★★★★★）

PHP 返回纯净 HTML（无 <script>）</script>：

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载
```
echo "<canvas class="stat-canvas" data-id="statsID{$id}" data-hp="{$hp}" data-att="{$att}" data-spa="{$spa}" data-def="{$def}" data-spd="{$spd}" data-spe="{$spe}"></canvas>";
```

主页面 JS 在 AJAX 成功后批量初始化 Canvas：

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        const resultsEl = document.getElementById('results');
        resultsEl.innerHTML = xmlhttp.responseText;

        // ✅ 主动查找并初始化所有新插入的 stat-canvas
        const canvases = resultsEl.querySelectorAll('.stat-canvas');
        canvases.forEach(canvas => {
            const id = canvas.dataset.id;
            const hp = parseInt(canvas.dataset.hp, 10);
            const att = parseInt(canvas.dataset.att, 10);
            const spa = parseInt(canvas.dataset.spa, 10);
            const def = parseInt(canvas.dataset.def, 10);
            const spd = parseInt(canvas.dataset.spd, 10);
            const spe = parseInt(canvas.dataset.spe, 10);

            funStats(id, hp, att, spa, def, spd, spe);
        });
    }
};

优化 funStats()：复用单个上下文，避免重复获取

⚠️ 原函数中多次调用 canvas.getContext('2d') 并分别绘制，不仅低效，还因共用同一 Canvas 导致图形覆盖混乱（所有弧线都画在同一坐标系）。应统一使用一个 2D 上下文，并按需调整样式与路径。

function funStats(id, hp, att, spa, def, spd, spe) {
    const canvas = document.getElementById(id);
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    canvas.width = 60;
    canvas.height = 60;

    const x = canvas.width / 2;
    const y = canvas.height / 2;
    const startAngle = 1.5 * Math.PI;
    const maxVal = 256 / 2; // 归一化分母

    // 半径由外向内递减
    const radii = [28, 24, 20, 16, 12, 8];
    const values = [hp, att, spa, def, spd, spe];
    const colors = ['#42af4f', '#d4bb49', '#4a95ca', '#cc6a14', '#8e55d3', '#ce58b0'];

    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布（可选，防重绘残留）

    values.forEach((val, i) => {
        const radius = radii[i];
        const endAngle = ((val / maxVal) + 1.5) * Math.PI;

        ctx.beginPath();
        ctx.arc(x, y, radius, startAngle, endAngle, false);
        ctx.lineWidth = 2;
        ctx.strokeStyle = colors[i];
        ctx.stroke();
    });
}