使用循环

Question

我想在canvas上放置文本并将其作为图像下载到foreach循环中。 文本包含不同的字体。我想下载230张这样的图片。

代码：

<div id="divFontPreview">
    <ul id="ulFonts">
        <li><a href="#" title="Times" new="" roman="" id="Times" style="font-family: Times New Roman">
        Times New Roman</a></li><li><a href="#" title="ABeeZee" id="ABeeZee" style="font-family: ABeeZee">
        ABeeZee</a></li><li><a href="#" title="Abel" id="Abel" style="font-family: Abel">Abel</a></li><li>
        <a href="#" title="Abril" fatface="" id="Abril" style="font-family: Abril Fatface">Abril
        Fatface</a></li><li><a href="#" title="Aclonica" id="Aclonica" style="font-family: Aclonica">
        Aclonica</a></li><li><a href="#" title="Acme" id="Acme" style="font-family: Acme">Acme</a></li><li>
        <a href="#" title="Action" man="" id="Action" style="font-family: Action Man">Action
        Man</a></li><li><a href="#" title="Actor" id="Actor" style="font-family: Actor">Actor</a></li>
    </ul>
</div>

<div>
    <canvas id="fonts" width="293" height="40" style="position: relative; border: solid;
        background-color: rgba(0,0,0,0)">
    </canvas>
</div>

脚本：

$('#btnStart').click(function () {
        setInterval(function () {
                $('#divFontPreview').find('a').each(function () {
                    debugger;
                    var text = $(this).text().trim();
                    var c = document.getElementById("fonts");
                    var ctx = c.getContext("2d");
                    ctx.clearRect(0, 0, c.width, c.height);
                    ctx.font = "20px " + text;
                    ctx.fillText(text, 10, 28);
                    var dt = c.toDataURL("image/png");
                    dt = dt.replace('data:image/png;base64', 'data:application/octet-stream;base64');
                    $(this).attr('download', text + '.png');
                    $(this).attr('href', dt);
                });
              }, 500);
     });

代码运行没有任何错误，但没有文件下载。如果我删除foreach循环并将事件添加到每个anchor标记，则会将其下载。