Question

我正在使用html5进行一个项目，其中我有一个画布，我正在一个接一个地绘制5个图像，时间间隔为1秒。我需要能够动态地在特定帧上写一些文本，这是我无法做到的。例如，当我输入3;你好在文本字段中，当第三帧被绘制到画布上时，它应该在其上显示文本hello。下面是我的javascript函数。

function overlayText(){

    string2 = document.getElementById("myTextArea"); 
    var splitString = (string2.value).split(";");
    var temp = splitString[0].split(",");
    var frameNumber = splitString[0];
    var text = splitString[1];
    //var array = text.split("\n"); 
alert(frameNumber); alert(text);

ctx.font = "16pt Arial";

    if(frameNumber!=0 && frameNumber<im1.length) {
        for(var i = 0; i < text.length; i++){
            //var temp = array[i];
            ctx.textAlign="left";
            ctx.textBaseline="bottom";
            ctx.fillText(im1[frameNumber].text[i], 40, 50); //Seems to be the issue

        }
    }

    else alert("Chill out!!Try entering realistic frame number");
}

我想我无法正确使用数组。有人可以帮我这个吗？谢谢你的帮助。

Answer 1

您无法在已绘制的图像下绘制文字。您必须将所有文本存储在某个共享变量（类似于图像＆＃39; URL的数组）中，并在drawImage处理程序内的相应setInterval调用之后立即绘制文本。不幸的是，你的小提琴不起作用。

在html5画布中在特定图像帧上书写文本的问题

1 个答案: