使用 AJAX 返回页面时画布未绘制

Question

我正在开发一个使用 AJAX 返回搜索结果的网站。一切工作正常，但是，我有一个为每个结果定义的画布，但它根本没有被绘制。如果我对要绘制的画布和脚本进行硬编码，它会起作用，但是，当我将其移动到正在运行查询的 PHP 文件时，它只会显示为空白画布。

这是我的 AJAX 调用，以防万一可能对结果产生影响：

function funSearch(val)
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById('results').innerHTML=xmlhttp.responseText;
        }
    }
    
    url = "search.php?search=" + val;
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}
</script>

这是我尝试运行的代码（以 # 结尾的值由 mySQL 数据库中的 PHP 脚本回显）：

<canvas id='statsID#'></canvas>";
<script>funStats(statsID#, HP#, ATT#, SPA#, DEF#, SPD#, SPE#);</script>";

这是我用来绘制的Javascript，尽管我非常怀疑这是问题所在，因为当我对上述画布/脚本文本进行卡编码时，它可以正常工作：

function funStats(id, hp, att, spa, def, spd, spe)
{
    var canvas = document.getElementById(id);
    
    var hpContext = canvas.getContext('2d');
    var attContext = canvas.getContext('2d');
    var spaContext = canvas.getContext('2d');
    var defContext = canvas.getContext('2d');
    var spdContext = canvas.getContext('2d');
    var speContext = canvas.getContext('2d');
    
    canvas.width = 60;
    canvas.height = 60;
    
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    
    var hpRadius = 28;
    var attRadius = 24;
    var spaRadius = 20;
    var defRadius = 16;
    var spdRadius = 12;
    var speRadius = 8;
    
    var startAngle = 1.5 * Math.PI;
    
    var hpEndAngle = ((hp / (256 / 2)) + 1.5) * Math.PI;
    var attEndAngle = ((att / (256 / 2)) + 1.5) * Math.PI;
    var spaEndAngle = ((spa / (256 / 2)) + 1.5) * Math.PI;
    var defEndAngle = ((def / (256 / 2)) + 1.5) * Math.PI;
    var spdEndAngle = ((spd / (256 / 2)) + 1.5) * Math.PI;
    var speEndAngle = ((spe / (256 / 2)) + 1.5) * Math.PI;
    
    hpContext.beginPath();
    hpContext.arc(x, y, hpRadius, startAngle, hpEndAngle, false);
    hpContext.lineWidth = 2;
    hpContext.strokeStyle = '#42af4f';
    hpContext.stroke();
    
    attContext.beginPath();
    attContext.arc(x, y, attRadius, startAngle, attEndAngle, false);
    attContext.lineWidth = 2;
    attContext.strokeStyle = '#d4bb49';
    attContext.stroke();
    
    spaContext.beginPath();
    spaContext.arc(x, y, spaRadius, startAngle, spaEndAngle, false);
    spaContext.lineWidth = 2;
    spaContext.strokeStyle = '#4a95ca';
    spaContext.stroke();
    
    defContext.beginPath();
    defContext.arc(x, y, defRadius, startAngle, defEndAngle, false);
    defContext.lineWidth = 2;
    defContext.strokeStyle = '#cc6a14';
    defContext.stroke();
    
    spdContext.beginPath();
    spdContext.arc(x, y, spdRadius, startAngle, spdEndAngle, false);
    spdContext.lineWidth = 2;
    spdContext.strokeStyle = '#8e55d3';
    spdContext.stroke();
    
    speContext.beginPath();
    speContext.arc(x, y, speRadius, startAngle, speEndAngle, false);
    speContext.lineWidth = 2;
    speContext.strokeStyle = '#ce58b0';
    speContext.stroke();
}

我已将其移动为硬编码（有效），但是一旦我将其移动到 AJAX PHP 中，它就不起作用了。还尝试将脚本移动到主页、AJAX 页面和外部文档上，并将其包含在脚本标记中。没有变化。

Answer 1

更改您的函数来为所述绘图创建画布对象

喜欢

function funStats(id, hp, att, spa, def, spd, spe)
{
    // Create the canvas
    var canvas = document.createElement('canvas');
    // Set the canvas size
    canvas.width = 60;
    canvas.height = 60;
    // append the canvas to the document
    document.body.appendChild(canvas);

    /* All Other code here*/
}