Question

StackOverflow社区，我对JavaScript编程很新，我在使用HTML5 / JavaScript Canvas Combo时遇到了一些问题。

想法是，在点击按钮后，验证一些线条，然后在屏幕上显示图像（预定义）和特定坐标中的一些文本，文本取决于输入值，如它们存储在数组中。

问题是，我无法在图像上绘制文本，只显示图像。代码如下：

全球定义：

...
canvas = document.getElementById("cvs"),
ctx = canvas.getContext('2d'),
...

Draw（）函数：

function draw() {
if (img_is_loaded) {

img = document.getElementById("background-A");

    var maxh = 600,
    maxw = 900,
    height = img.height,
    width = img.width,
    name_input = name[0],
    note_input = note[0],
    date_input = date[0],
    sur_input = sur[0];

    while (height > maxh || width > maxw) {
        --height;
        --width;
    }

    canvas.height = height;
    canvas.width = width;
    ctx.save();
    ctx.clearRect(0, 0, width, height);

    ctx.drawImage(img, 0, 0, width, height);

    ctx.font = "54px Times Roman";
    ctx.fillStyle = "#000000";
    ctx.fillText = (name_input, 35, 320);

    ctx.font = "21px Times Roman";
    ctx.fillStyle = "#000000";
    ctx.fillText = (note_input, 61, 432);
    ctx.fillText = (date_input, 254, 501);
    ctx.fillText = (sur_input, 254, 528);


    }


} else {
    setTimeout(draw, 100);
}
}

我正在获取图片，但没有文字。我知道这个问题通常是我需要“同时”绘制它们，所以我试过了：

function draw() {
if (img_is_loaded) {


var imageObj = new Image();
imageObj.onload = function(){
    var maxh = 600,
    maxw = 900,
        height = imageObj.height,
        width = imageObj.width,
        name_input = name[0],
    note_input = note[0],
    date_input = date[0],
    sur_input = sur[0];

    while (height > maxh || width > maxw) {
        --height;
        --width;
    }

    canvas.height = height;
    canvas.width = width;
    ctx.save();
    ctx.clearRect(0, 0, width, height);
    $('#spinner-generate').hide();

    ctx.drawImage(imageObj, 0, 0, width, height);

    ctx.font = "54px Times Roman";
    ctx.fillStyle = "#000000";
    ctx.fillText = (name_input, 35, 320);

    ctx.font = "21px Times Roman";
    ctx.fillStyle = "#000000";
    ctx.fillText = (note_input, 61, 432);
    ctx.fillText = (date_input, 254, 501);
    ctx.fillText = (sur_input, 254, 528);


    ctx.restore();
        }
imageObj.src = "IMAGEPATH";


} else {
    setTimeout(draw, 100);
}
}

但是，在这种情况下，代码会跳过“imageObj.onload”函数，它会自动跳转到“else”。

我真的很困惑，因为我所咨询的每一个来源都说它很“简单”并且使用了imageObj.onload示例，但是使用了“window.onload”组合。

关于画布的“事物顺序”，我有什么遗漏吗？

我感谢并提前感谢任何回复或意见。

Answer 1

您使用fillText作为属性，而它应该被用作方法 - 只需将行更改为以下格式：

 ctx.fillText(name_input, 35, 320);

我没有检查剩下的代码。

HTML5 / JavaScript Canvas：点击图片上的文字

1 个答案: