Question

我觉得有一种非常简单的方法可以做到这一点，但我无法找到它。我有一张图片，其clientscript.js文件的相对路径为./images/orig classic pokemon frame.png。我想在画布上绘制它，围绕在此代码段的最后一行绘制的文本：

function render(context) {
    context.fillStyle = 'black';
    context.strokeStyle = 'black';
    context.save();
    var imgFrame = new Image();
    imgFrame.src = './images/origclassicpokemonframe.png';
    imgFrame.onload = function(){
        context.drawImage(imgFrame, 0, 0, 30,30);
    };
    context.font = "24px Early GameBoy";
    context.fillText("What? _____", 10, canvasHeight-44); //20 padding plus 24 line height

文本显示在画布上，但框架永远不会。更改尺寸或x和y坐标没有区别。任何帮助表示赞赏。

编辑：将文件路径更改为images/origclassicpokemonframe.PNG，现在图片显示在firefox中的画布上，但不显示为chrome。帮助????

另一个编辑：我可以在chrome和firefox的控制台中看到HTTP请求加载它很好但不知何故它只是不想在画布上绘制。

Answer 1

context不是全局变量。因此，在＆＃39; onload＆＃39;中使用它。功能超出了它的范围。

如果src在<img>元素中有效，那么你的src没有任何问题。

使用相对文件路径

1 个答案: