我在HTML画布中使用位图字体，但是当您首次在Firefox中加载页面时（或者如果禁用缓存，例如在DevTools中），则不会显示该字体。
这是页面：--snip -
首先，加载字体图像：。
var font = new Image();
font.src = "img/fontwhite.png";
font.onload = loadFontColours;
加载后，我将它的着色版本加载到颜色数组中。
colourLookupTable[0].fontBuf = generateTintImage(font, 240, 240, 240);
colourLookupTable[1].fontBuf = generateTintImage(font, 242, 178, 51);
colourLookupTable[2].fontBuf = generateTintImage(font, 229, 127, 216);
colourLookupTable[3].fontBuf = generateTintImage(font, 153, 178, 242);
colourLookupTable[4].fontBuf = generateTintImage(font, 222, 222, 108);
colourLookupTable[5].fontBuf = generateTintImage(font, 127, 204, 25);
colourLookupTable[6].fontBuf = generateTintImage(font, 242, 178, 204);
colourLookupTable[7].fontBuf = generateTintImage(font, 76, 76, 76);
colourLookupTable[8].fontBuf = generateTintImage(font, 153, 153, 153);
colourLookupTable[9].fontBuf = generateTintImage(font, 76, 153, 178);
colourLookupTable[10].fontBuf = generateTintImage(font, 178, 102, 229);
colourLookupTable[11].fontBuf = generateTintImage(font, 51, 102, 204);
colourLookupTable[12].fontBuf = generateTintImage(font, 127, 102, 76);
colourLookupTable[13].fontBuf = generateTintImage(font, 87, 166, 78);
colourLookupTable[14].fontBuf = generateTintImage(font, 204, 76, 76);
colourLookupTable[15].fontBuf = generateTintImage(font, 25, 25, 25);
在Chrome中，您可以看到字体看起来非常精细，缓存与否。但是，在Firefox中，除非缓存，否则它不会出现。我错过了一些明显的东西吗？
完整代码：
$(function() {
var termWidth = 51;
var termHeight = 19;
var textScale = 2;
var pixelWidth = 1 * 6 * textScale;
var pixelHeight = 1.5 * 6 * textScale;
var fontSize = 8;
var container = $("#term");
var canvas = $("#term canvas#main");
var ctx = $("#term canvas#main")[0].getContext("2d");
canvas.hide();
container.hide();
var pixels = [];
var colourLookupTable = [{
name: "white",
realColour: "#F0F0F0",
fontBuf:null
}, {
name: "orange",
realColour: "#F2B233",
fontBuf: null
}, {
name: "magenta",
realColour: "#E57FD8",
fontBuf:null
}, {
name: "lightBlue",
realColour: "#99B2F2",
fontBuf:null
}, {
name: "yellow",
realColour: "#DEDE6C",
fontBuf:null
}, {
name: "lime",
realColour: "#7FCC19",
fontBuf:null
}, {
name: "pink",
realColour: "#F2B2CC",
fontBuf:null
}, {
name: "grey",
simplifiedSpelling: "gray",
realColour: "#4C4C4C",
fontBuf:null
}, {
name: "lightGrey",
simplifiedSpelling: "lightGray",
realColour: "#999999",
fontBuf:null
}, {
name: "cyan",
realColour: "#4C99B2",
fontBuf:null
}, {
name: "purple",
realColour: "#B266E5",
fontBuf:null
}, {
name: "blue",
realColour: "#3366CC",
fontBuf:null
}, {
name: "brown",
realColour: "#7F664C",
fontBuf:null
}, {
name: "green",
realColour: "#57A64E",
fontBuf:null
}, {
name: "red",
realColour: "#CC4C4C",
fontBuf:null
}, {
name: "black",
realColour: "#191919",
realColourBg: "#000000",
fontBuf:null
}];
var font = new Image();
font.src = "img/fontwhite.png";
font.onload = loadFontColours;
function loadFontColours() {
console.log("loading font colours");
console.log(font);
var start = new Date().getTime();
colourLookupTable[0].fontBuf = generateTintImage(font, 240, 240, 240);
colourLookupTable[1].fontBuf = generateTintImage(font, 242, 178, 51);
colourLookupTable[2].fontBuf = generateTintImage(font, 229, 127, 216);
colourLookupTable[3].fontBuf = generateTintImage(font, 153, 178, 242);
colourLookupTable[4].fontBuf = generateTintImage(font, 222, 222, 108);
colourLookupTable[5].fontBuf = generateTintImage(font, 127, 204, 25);
colourLookupTable[6].fontBuf = generateTintImage(font, 242, 178, 204);
colourLookupTable[7].fontBuf = generateTintImage(font, 76, 76, 76);
colourLookupTable[8].fontBuf = generateTintImage(font, 153, 153, 153);
colourLookupTable[9].fontBuf = generateTintImage(font, 76, 153, 178);
colourLookupTable[10].fontBuf = generateTintImage(font, 178, 102, 229);
colourLookupTable[11].fontBuf = generateTintImage(font, 51, 102, 204);
colourLookupTable[12].fontBuf = generateTintImage(font, 127, 102, 76);
colourLookupTable[13].fontBuf = generateTintImage(font, 87, 166, 78);
colourLookupTable[14].fontBuf = generateTintImage(font, 204, 76, 76);
colourLookupTable[15].fontBuf = generateTintImage(font, 25, 25, 25);
var end = new Date().getTime();
console.log("loaded font colours, " + (end - start) + "ms");
console.log(colourLookupTable);
drawAll();
}
console.log("font src");
function initScreen() {
pixelWidth = 1 * 6 * textScale;
pixelHeight = 1.5 * 6 * textScale;
container.css("border-width", 12 * textScale);
container.css("font-size", 8 * textScale);
canvas.attr("width", termWidth * pixelWidth + textScale * 4);
canvas.attr("height", termHeight * pixelHeight + textScale * 4);
canvas.width(termWidth * pixelWidth + textScale * 4);
canvas.height(termHeight * pixelHeight + textScale * 4);
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
for (var y = 0; y < termHeight; y++) {
pixels[y] = [];
for (var x = 0; x < termWidth; x++) {
pixels[y][x] = new Pixel();
pixels[y][x].textColour = Math.floor(Math.random()*16);
pixels[y][x].backgroundColour = Math.floor(Math.random()*16);
pixels[y][x].text = String.fromCharCode(Math.floor(Math.random()*96) + 32);
}
}
//canvas.fadeIn(1250);
// container.slideDown(1250);
canvas.show();
container.show();
}
function drawAll() {
for (var y = 0; y < termHeight; y++) {
for (var x = 0; x < termWidth; x++) {
pixels[y][x].textColour = Math.floor(Math.random()*16);
pixels[y][x].backgroundColour = Math.floor(Math.random()*16);
pixels[y][x].text = String.fromCharCode(Math.floor(Math.random()*96) + 32);
pixels[y][x].draw(x, y);
}
}
}
var charsX = 16;
var charsY = 6;
var charWidth = 8;
var charHeight = 8;
function Pixel() {
this.textColour = 0xE;
this.backgroundColour = 0xF;
this.text = "";
// lemmmy's _ but sassy cc rendering thing(tm)
this.draw = function(x, y) {
this.text = this.text.substring(0, 1);
var clt = colourLookupTable[this.backgroundColour];
ctx.fillStyle = clt.realColourBg ? clt.realColourBg : clt.realColour;
ctx.fillRect(x * pixelWidth + textScale * 2, y * pixelHeight + textScale * 2, pixelWidth, pixelHeight);
clt = colourLookupTable[this.textColour];
if (font != null && clt.fontBuf != null) {
var char = this.text.charCodeAt(0);
if (char > 32 && char < 127) {
var fx = (char - 32) % charsX;
var fy = Math.floor((char - 32) / charsX);
ctx.drawImage(clt.fontBuf, fx * charWidth, fy * charHeight,
charWidth, charHeight,
x * pixelWidth + textScale * 2, y * pixelHeight + textScale * 2,
charWidth * textScale, charHeight * textScale);
}
}
}
}
function generateRGBKs( img ) {
var w = img.width;
var h = img.height;
var rgbks = [];
var fcanvas = document.createElement("canvas");
fcanvas.width = w;
fcanvas.height = h;
var fctx = fcanvas.getContext("2d");
fctx.drawImage( img, 0, 0 );
var pixels = fctx.getImageData( 0, 0, w, h ).data;
for ( var rgbI = 0; rgbI < 4; rgbI++ ) {
var fcanvas = document.createElement("canvas");
fcanvas.width = w;
fcanvas.height = h;
var fctx = fcanvas.getContext('2d');
fctx.drawImage( img, 0, 0 );
var to = fctx.getImageData( 0, 0, w, h );
var toData = to.data;
for (
var i = 0, len = pixels.length;
i < len;
i += 4
) {
toData[i ] = (rgbI === 0) ? pixels[i ] : 0;
toData[i+1] = (rgbI === 1) ? pixels[i+1] : 0;
toData[i+2] = (rgbI === 2) ? pixels[i+2] : 0;
toData[i+3] = pixels[i+3] ;
}
fctx.putImageData( to, 0, 0 );
var imgComp = new Image();
imgComp.src = fcanvas.toDataURL();
rgbks.push( imgComp );
}
return rgbks;
}
function generateTintImage( img, red, green, blue ) {
var buff = document.createElement( "canvas" );
buff.width = img.width;
buff.height = img.height;
var rgbks = generateRGBKs(img);
var fctx = buff.getContext("2d");
fctx.globalAlpha = 1;
fctx.globalCompositeOperation = 'copy';
fctx.drawImage( rgbks[3], 0, 0 );
fctx.globalCompositeOperation = 'lighter';
if ( red > 0 ) {
fctx.globalAlpha = red / 255.0;
fctx.drawImage( rgbks[0], 0, 0 );
}
if ( green > 0 ) {
fctx.globalAlpha = green / 255.0;
fctx.drawImage( rgbks[1], 0, 0 );
}
if ( blue > 0 ) {
fctx.globalAlpha = blue / 255.0;
fctx.drawImage( rgbks[2], 0, 0 );
}
return buff;
}
initScreen();
//setInterval(drawAll, 500);
});
答案 0 :(得分：0)
谢谢你，K3N！通过只调用generateRGBKs一次并向其imgComp添加回调，问题就解决了。
function loadFontColours() {
console.log("loading font colours");
console.log(font);
var start = new Date().getTime();
var rgbks = generateRGBKs(font, function() {
colourLookupTable[0].fontBuf = generateTintImage(rgbks, font, 240, 240, 240);
colourLookupTable[1].fontBuf = generateTintImage(rgbks, font, 242, 178, 51);
colourLookupTable[2].fontBuf = generateTintImage(rgbks, font, 229, 127, 216);
colourLookupTable[3].fontBuf = generateTintImage(rgbks, font, 153, 178, 242);
colourLookupTable[4].fontBuf = generateTintImage(rgbks, font, 222, 222, 108);
colourLookupTable[5].fontBuf = generateTintImage(rgbks, font, 127, 204, 25);
colourLookupTable[6].fontBuf = generateTintImage(rgbks, font, 242, 178, 204);
colourLookupTable[7].fontBuf = generateTintImage(rgbks, font, 76, 76, 76);
colourLookupTable[8].fontBuf = generateTintImage(rgbks, font, 153, 153, 153);
colourLookupTable[9].fontBuf = generateTintImage(rgbks, font, 76, 153, 178);
colourLookupTable[10].fontBuf = generateTintImage(rgbks, font, 178, 102, 229);
colourLookupTable[11].fontBuf = generateTintImage(rgbks, font, 51, 102, 204);
colourLookupTable[12].fontBuf = generateTintImage(rgbks, font, 127, 102, 76);
colourLookupTable[13].fontBuf = generateTintImage(rgbks, font, 87, 166, 78);
colourLookupTable[14].fontBuf = generateTintImage(rgbks, font, 204, 76, 76);
colourLookupTable[15].fontBuf = generateTintImage(rgbks, font, 25, 25, 25);
var end = new Date().getTime();
console.log("loaded font colours, " + (end - start) + "ms");
console.log(colourLookupTable);
drawAll();
});
}