画布javascript文本仅在第二次加载后显示

时间:2018-06-23 23:16:16

标签: javascript canvas html5-canvas

我正在使用C2D为单一主题重新创建图像。问题是,当我在Firefox(用于该主题的浏览器)中加载图像时,文本仅在第二次加载时显示。

对于文本,我决定使用CSS导入字体,并使用javascript编写文本:

    //javascript var for the import
    var FontName2 = "libelsuit";
    /css code here:
    @font-face{
        font-family: 'libelsuit';
        src: url('libelsuit.TTF');

    }

我有写文字的功能:

function text(c, font, text, fillStyle, strokeStyle){
    c.font = font;
    c.fillStyle = fillStyle;
    c.strokeStyle = strokeStyle;
    c.strokeText(text, 0, 0);
    c.fillText(text, 0, 0);
}

以及用于保存和恢复对象的功能(由教授提供):

function enter(c, dx, dy, sx, sy) {
    c.save();
    c.translate(dx,dy);//translate to the actual position in the image
    c.scale(sx,sy);//scale accordingly to the image format
}


function leave(c, fs, ss) {
    c.restore();
    c.fillStyle = fs;
    c.strokeStyle = ss;   
    c.fill();
    c.stroke();    
}

我在这里与文本功能结合使用:

function capa(c, font, font2, font3){
    draw_background(c);
    logo(c);

    enter(c, 0, 0, 425, 700);
    pig_body(c);//object in the recreated image
    leave(c, "rgb(252, 176, 142)", "rgb(252, 176, 142)");

    enter(c, 20.315, 110.67, 1.1, 1);
    text(c, "88px " + font, "ANIMAL", "black", "black");
    leave(c, "", "");/*here the style values are null because
    I already have them in the text function.*/

    enter(c, 24.3775, 206.85, 1.05, 1);
    text(c, "88px " + font, "FARM", "black", "black");
    leave(c, "", "");

所有输入值都是正确的,或者我认为是。 我注意到的是,当我更改第一个文本函数调用的输入和离开值时,它将影响第二个文本函数调用。有人知道为什么会这样吗?

0 个答案:

没有答案