Question

我在IE9,10中有一个奇怪的问题，在画布中绘制的字体变得拉长。但它在chrome和firefox中表现得很好。似乎无法解决它。有什么帮助吗？

var lyrics = ["Contrary", "to", "popular", "belief,", "Lorem", "Ipsum", "is", "not", "simply", "random", "text.", "It", "has", "roots", "in", "a", "piece", "of", "classical", "Latin", "literature", "from", "45", "BC,", "making", "it", "over", "2000", "years", "old.", "Richard", "McClintock,", "a", "Latin", "professor", "at", "Hampden-Sydney", "College", "in", "Virginia,", "looked", "up", "one", "of", "the", "more", "obscure", "Latin", "words,", "consectetur,", "from", "a", "Lorem", "Ipsum", "passage,", "and", "going", "through", "the", "cites", "of", "the", "word", "in", "classical", "literature,", "discovered", "the", "undoubtable", "source.", "Lorem", "Ipsum", "comes", "from", "sections", "1.10.32", "and", "1.10.33", "of", "de", "Finibus", "Bonorum", "et", "Malorum", "(The", "Extremes", "of", "Good", "and", "Evil)", "by", "Cicero,", "written", "in", "45", "BC.", "This", "book", "is", "a", "treatise", "on", "the", "theory", "of", "ethics,", "very", "popular", "during", "the", "Renaissance.", "The", "first", "line", "of", "Lorem", "Ipsum,", "Lorem", "ipsum", "dolor", "sit", "amet..,", "comes", "from", "a", "line", "in", "section", "1.10.32.The", "standard", "chunk", "of", "Lorem", "Ipsum", "used", "since", "the", "1500s", "is", "reproduced", "below", "for", "those", "interested.", "Sections", "1.10.32", "and", "1.10.33", "from", "de", "Finibus", "Bonorum", "et", "Malorum", "by", "Cicero", "are", "also", "reproduced", "in", "their", "exact", "original", "form,", "accompanied", "by", "English", "versions", "from", "the", "1914", "translation", "by", "H.", "Rackham."];

var canvasWrapper = document.createElement('canvas');
var canvasWrapperContext = canvasWrapper.getContext('2d');
canvasWrapper.width = window.innerWidth;
canvasWrapper.height = 50;


var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
canvas.width = 14801;
canvas.height = 50;
canvasContext.font = "22pt Arial";

var txtSpace = 15,
    prevX = 35,
    lyricsWordWidth = [],
    lyricsItemCount = 0,
    txtWidth = 0;

for (var i in lyrics) {
    var tempCanvas = document.createElement('canvas'),
        txtWidth = 0,
        text;
    tempCanvasContext = tempCanvas.getContext('2d'), tempCanvasContext.fillStyle = "#000", tempCanvasContext.font = "bold 22pt Arial";
    text = lyrics[i];
    tempCanvasContext.fillText(text, 0, 0);
    if (i == 0) {
        prevX = 35;
    } else {
        prevX = prevX + lyricsWordWidth[i - 1].width + txtSpace;
    }

    txtWidth = tempCanvasContext.measureText(text).width;
    lyricsWordWidth[i] = {
        'width': txtWidth,
            'x': prevX
    };

    canvasContext.fillText(lyrics[i], prevX, 40);
}


canvasWrapperContext.drawImage(canvas, 0, 0, 14000, canvasWrapper.height);
document.body.appendChild(canvasWrapper);

Answer 1

只是一个猜测：

当最大IE画布宽度为8192时，拉伸是设置画布宽度= 14801的结果。

字体在画布中的IE中被拉伸

1 个答案: