Question

我遇到的问题是，当客户端选择不同的单选按钮时，我正在尝试从canvas标签更改图像。

画布的内容存储在数据库中，其中包含我从Illustrator获取的绘图代码（很多代码）。

我首先要做的是通过id更改脚本标记中的数据，我在其中创建绘制画布的函数。

效果很好，它正确地画了画。问题是，当我选择另一个单选按钮时，即使脚本内容发生变化，功能也会发生变化，它会绘制相同的绘画，而不是更新的绘画。

我认为发生这种情况是因为JavaScript在已经调用过一次之后不会更新函数的内容。我错了吗？

如果是我遇到的问题，是否可以在调用函数后更改函数的内容？

这是html代码：

<canvas id="myCanvasDel" height="600" width="600" style="max-width:600px;"></canvas>
<script id="scriptjs"></script>

当我点击单选按钮时，这是一个JavaScript：

function mostrarCanvas(codiprd, codicol) {
    $.ajax({
        dataType: "html",
        type: "POST",
        url: "ajaxcanvas.php",
        data: {
            codiprd: codiprd,
            codicol: codicol
        },
        success: function (datos) {

            $('#scriptjs').html(datos);

            var canvasDel = document.getElementById("myCanvasDel");
            var ctxDel = canvasDel.getContext("2d");
            drawDel(ctxDel);
        },
        error: function (e) {
            alert('Ha habido un error: ' + e);
        }
    });
    return false;
}

这是ajax文件调用的PHP：

$codiprd=$_POST['codiprd'];
$codicol=$_POST['codicol'];
$querycnv = "SELECT CANVAS "
        . "FROM MYTABLE PC "
        . "WHERE PC.CODIPRD=$codiprd AND PC.CODICOL=$codicol "
        . "GROUP BY PC.CODIPRD,PC.CODICOL;";

$resultcnv = mysqli_query($conn, $querycnv)or die(mysqli_error());
$canvas = mysqli_fetch_array($resultcnv);

echo $canvas['CANVAS']);

Answer 1

您可以重新定义该功能，因为您可以重新定义任何变量。

function foo(){
    console.log("blah");
}

可以用

重新定义

foo = function(){
    console.log("blah,blah");
}

函数只是另一个对象，因此可以像任何引用的变量一样使用。

您可以从字符串

创建一个函数

var funcStr = 'return "hi there!";';  // the function body
var func = new Function(funcStr);  // create the function
console.log(func()); // >> hi there

使用

设置参数

var funcStr = 'return "hi there " + name;';  // the function body with arg name
var func = new Function("name",funcStr);  // create the function with the argument name
console.log(func("Me")); // >> hi there Me

您还可以创建脚本标记并将其添加到DOM

    var scriptSource = "//Source code;\nconsole.log("Script run");"
    var script = document.createElement("script");
    script.async = true;
    script.text = scriptSource;
    document.body.appendChild(script);
    // in time the console will read
    // >> Script run

您需要等待解析脚本，在退出当前执行之前不会发生这种情况。加载脚本后，首先解析然后运行。如果您希望可以在脚本标记中使用函数体，并让它自行运行。

如何动态更改JavaScript函数的内容？

1 个答案: