0
我在HTML画布中使用位图字体，但是当您第一次在Firefox中加载页面时（或者禁用了缓存，例如在DevTools中）时，字体不会显示。Canvas在Firefox中加载不正确，除非缓存
这里是页：--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);
});
没有调试代码，听起来像是一个时间问题，你没有正确地等待图像首先加载的地方。当你遇到错误情况（你有无效的图像对象）时，你可以通过检查JavaScript断点中加载的图像来调试。 –
图像对象有效。经过紧张的调试之后，我在绘制它的时候看起来就很好。 – Lemmmy
Your var imgComp = new Image（）;也是异步的。 – K3N