Canvas 动态插入后无法渲染的解决方案-js教程-PHP中文网

Canvas 动态插入后无法渲染的解决方案

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）动态注入包含

✅ 正确做法：分离结构与行为，确保脚本在元素就绪后执行

最推荐、最健壮的方案是 避免在 PHP 返回的 HTML 中混写内联脚本，改为由主页面统一接管绘制逻辑。具体步骤如下：

PHP 返回纯净 HTML 结构（不含 <script>）</script>

Markdown Canvas
将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

下载
```
// search.php 中仅输出：
echo "<canvas id="statsID{$id}" data-hp="{$hp}" data-att="{$att}" data-spa="{$spa}" data-def="{$def}" data-spd="{$spd}" data-spe="{$spe}"></canvas>";
```

AJAX 成功回调中，批量查找并初始化所有新 Canvas

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

        // 查找所有新插入的 canvas 并绘制
        const newCanvases = resultsDiv.querySelectorAll('canvas[id^="statsID"]');
        newCanvases.forEach(canvas => {
            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(canvas.id, hp, att, spa, def, spd, spe);
        });
    }
};

优化 funStats()：复用单个 2D 上下文，提升性能与可维护性
原函数为每个属性重复获取 getContext('2d') 并多次调用 beginPath()，既冗余又易出错。改进如下：

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 centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const startAngle = 1.5 * Math.PI;
    const maxVal = 256 / 2; // 归一化基准

    // 定义各环参数：[半径, 颜色, 值]
    const rings = [
        [28, '#42af4f', hp],
        [24, '#d4bb49', att],
        [20, '#4a95ca', spa],
        [16, '#cc6a14', def],
        [12, '#8e55d3', spd],
        [8,  '#ce58b0', spe]
    ];

    rings.forEach(([radius, color, value]) => {
        const endAngle = ((value / maxVal) + 1.5) * Math.PI;
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
        ctx.lineWidth = 2;
        ctx.strokeStyle = color;
        ctx.stroke();
    });
}

⚠️ 注意事项与替代方案

不推荐 eval() 或 new Function() 执行内联脚本：存在严重 XSS 风险，且违背安全最佳实践。
避免 document.write() 或 document.body.appendChild() 动态创建 canvas（如答案所提）：该方式将 canvas 插入到底部，脱离原有布局上下文，破坏 DOM 结构预期，且难以定位样式与交互。

若必须保留内联脚本结构（不推荐），可手动提取并执行：

// 在 innerHTML 后解析 script 标签（仅作技术参考，勿用于生产）
const tempDiv = document.createElement('div');
tempDiv.innerHTML = xmlhttp.responseText;
const scripts = tempDiv.querySelectorAll('script');
scripts.forEach(script => {
    if (script.textContent) {
        try { eval(script.textContent); } catch (e) { console.error(e); }
    }
});
resultsDiv.appendChild(tempDiv);

但此方案脆弱、不可靠，且无法解决跨域或 CSP 限制问题。