Javascript 在动画完成之前执行onAnimationComplete

我用于图表，并希望在画布上使用

.toDataURL

我试图通过回调函数在动画完成后获取URL，但我的URL包含一个空图像。如果我放置了一个警报（请参见注释），该警报将在动画可视化完成之前显示

这是HTML

<h1>Chart as img</h1>
<img id="foobar" src="" />

<h1>Original Canvas</h1>
<canvas id="myChart" width="300" height="300"></canvas>

简单。不要调用

done

函数

options: {
    responsive: false,
    legend: {
        display: false,
    },
    onAnimationComplete: done // <--- no parentheses!
}

选项：{
回答：错，
图例：{
显示：假，
},
onAnimationComplete:done/简单。不要调用
done
函数

options: {
    responsive: false,
    legend: {
        display: false,
    },
    onAnimationComplete: done // <--- no parentheses!
}

选项：{
回答：错，
图例：{
显示：假，
},
onAnimationComplete:done//我认为这是因为在浏览器中执行脚本时，您的函数被直接调用。这不是回调。您可以尝试以下操作：

var done = function () {
    var url = document.getElementById("myChart").toDataURL();
    // alert(url);
    $("#foobar").attr("src", url);
}

此外：

//Notice how I am using the variable instead of calling the function.
onAnimationComplete: done

我认为这是因为当脚本在浏览器中执行时，您的函数正被直接调用。这不是回调。您可以尝试以下方法：

var done = function () {
    var url = document.getElementById("myChart").toDataURL();
    // alert(url);
    $("#foobar").attr("src", url);
}

此外：

//Notice how I am using the variable instead of calling the function.
onAnimationComplete: done

如果执行此操作，则不会发生警报。函数不会执行。如果执行此操作，则会出现相同的行为，例如，
onAnimationComplete:function（）{alert（“Completed！”）}
。在这种情况下，警报也不会显示。但这表明脚本中存在其他错误。如果执行此操作，则不会出现警报。函数不会执行。如果执行此操作，则会出现相同的行为，例如，
onAnimationComplete:function（）{alert（“Completed！”）}
。在这种情况下，警报也不会显示。但这表明脚本中存在其他错误。