javascript - 在 HTML5 Canvas 上放置文本在浏览器之间不一致

Question

我在 HTML5 Canvas 中放置文本。我将上下文 textAlign 值设置为居中，将 textBaseline 设置为“悬挂”

我很困惑，因为 safari 和 chrome 以及 webkit 和文本放置是不同的，即使被告知在同一个地方也是如此。

Chrome 看起来正确:

火狐也是

但是 safari 将文本放在较低的位置(相同的代码)

知道 safari 如何以不同方式计算位置以便我可以为其构建异常(exception)吗？

Answer 1

适合文本是一件痛苦的事。这是使文本适合几乎像素完美的非标准方法。 (宽度可能会在内部请求一点点，一些字体只是在那里测量的方式)。

此方法以大尺寸“100px”呈现文本，然后测量其各个部分。您可以适合矩形，您可以在演示中看到四个选项。 T、H 和类似的字母往往比 O、G 和圆 Angular 字母略短，您可以选择是否将圆位保留在内部，您可以忽略尾部 'y、j、g' 或将它们保留在内部。

测量功能多次呈现文本以找到各个部分，如果您想要更好的样本或特定字体很麻烦，您可以重叠几个字母。

此解决方案适用于所有具有良好 Canvas 支持的浏览器。

对于命名，我很抱歉，但这个特殊问题让我很困扰，我们在所有其他浏览器 API 中都能获得很棒的文本，所以为什么不使用 canvas？？？？？ (SVG 阵营的 secret 阴谋 LOL ;)我认为

两个函数。首先测量文本，并返回一个包含相关信息的对象，第二个渲染文本以​​适合矩形。查看底部的代码如何使用它并设置控制挂尾和圆位的两个标志。

var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 800;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);


function superWTFCanvasTextMessure(font){ // just the font name please.....
    var c = document.createElement("canvas"); // make canvas
    var ctx1 = c.getContext("2d"); // get the thing that draw the stuff
    ctx1.font = "100px "+font; // big font
    ctx1.textAlign = "center";  // put it in the middle
    ctx1.textBaseline = "middle";
    // draw text nice and solid...
    ctx1.fillText("lp",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("lp",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("lp",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("lq",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("lg",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("lj",Math.floor(c.width/2),Math.floor(c.height/2));
    // get the pixels as words
    
    var data= new Uint32Array(ctx1.getImageData(0,0,canvas.width,canvas.height).data.buffer);
    var top = 0;
    while(data[top++] === 0);  // find the first pixel on from the top;
    var tail = data.length - 1;
    while(data[tail--] === 0); // find the first pixel on from the bottom;
     
    ctx1.clearRect(0,0,canvas.width,canvas.height); // clear up the mess
    // and now for the Base  draw text nice and solid...
    ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
    // get the pixels as words
    data= new Uint32Array(ctx1.getImageData(0,0,canvas.width,canvas.height).data.buffer);
    var bum = data.length - 1;
    while(data[bum--] === 0); // find the first pixel on from the bottom;

    // and the round bits the poke out in all the wrong places.
    ctx1.clearRect(0,0,canvas.width,canvas.height); // clear up the mess
    // and now for the Base  draw text nice and solid...
    ctx1.fillText("O",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("J",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("?",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("G",Math.floor(c.width/2),Math.floor(c.height/2));
    ctx1.fillText("O",Math.floor(c.width/2),Math.floor(c.height/2));
    // get the pixels as words
    data= new Uint32Array(ctx1.getImageData(0,0,canvas.width,canvas.height).data.buffer);
    var head = 0;
    while(data[head++] === 0); // find the first pixel on from the bottom;
    var theOtherBit = data.length - 1;
    while(data[theOtherBit--] === 0); // find the first pixel on from the bottom;

    
    return {
        body: Math.floor(bum / canvas.width) - Math.floor(top / canvas.width)+1,
        all : Math.floor(tail / canvas.width) - Math.floor(top / canvas.width)+1,
        offset : Math.floor(c.height/2) - Math.floor(top / canvas.width),
        t2A : Math.floor(theOtherBit / canvas.width) - Math.floor(head / canvas.width)+1,
        t2t : Math.floor(tail / canvas.width) - Math.floor(head / canvas.width)+1,
        offsetHead : Math.floor(c.height/2) - Math.floor(head / canvas.width),
        font : ctx1.font,
    };
}

function drawPixelPerfectTextTheHardWay(text,left,top,width,height,sWTFDesc){
    var sy,offy;
    ctx.font = sWTFDesc.font; // set up the same font as measured. (dont worry it will be scaled and can be any size but if not measure at 100 px this will not work as well)
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    var w = ctx.measureText(text).width;  // get the width
    if(sWTFDesc.bumsDown){
        if(sWTFDesc.extrasIn){
            sy =  height/ sWTFDesc.t2A;   // get the height scale
        }else{
            sy =  height/ sWTFDesc.body;   // get the height scale
        }
    }else{
        if(sWTFDesc.extrasIn){
            sy =  height/ sWTFDesc.t2t;   // get the height scale
        }else{
            sy =  height/ sWTFDesc.all;   // get the height scale
        }
        
    }
    var sx = width / w; // get the x scale
    if(sWTFDesc.extrasIn){
        offy = sWTFDesc.offset * sy; // get top offset
    }else{
        offy = sWTFDesc.offset * sy; // get the correct offset
    }
    // set up the tranform
    ctx.setTransform(sx,0,0,sy,left + width / 2, top + offy);
    ctx.fillText(text,0,0);
    ctx.setTransform(1,0,0,1,0,0);  // reset the tranform to the default..
    // all diddly done..
}


ctx.clearRect(0,0,canvas.width,canvas.height)
var superFontDesc = superWTFCanvasTextMessure("arial");


ctx.strokeStyle = "black";
ctx.fillStyle = "red";
ctx.strokeRect(10,200,700,140);
drawPixelPerfectTextTheHardWay("mind p & q's ? j,g",10,200,700,140,superFontDesc);

ctx.fillStyle = "green";
ctx.strokeRect(20,400,700,120);
superFontDesc.bumsDown = true;
drawPixelPerfectTextTheHardWay("test this Jimmy!!",20,400,700,120,superFontDesc);

ctx.fillStyle = "blue";
ctx.strokeRect(20,20,700,140);
superFontDesc.bumsDown = true;
superFontDesc.extrasIn= true;

drawPixelPerfectTextTheHardWay("test this Jimmy!!",20,20,700,140,superFontDesc);

ctx.fillStyle = "#a50";
ctx.strokeRect(20,570,700,140);
superFontDesc.bumsDown = false;
superFontDesc.extrasIn= true;

drawPixelPerfectTextTheHardWay("????&GGhjqgy",20,570,700,140,superFontDesc);
ctx.font = "20px arial";
ctx.textAlign = "left";
ctx.fillStyle = "black";
ctx.fillText("Round bits in and tails hanging.",10,174);
ctx.fillText("Round bits out and tails in.",10,354);
ctx.fillText("Round bits out and tails hanging.",10,540);
ctx.fillText("Round bits out and tails in.",10,724);