在跨浏览器的HTML5 Canvas上放置文本不一致

Question

我将文本放在HTML5画布中。 我将上下文textAlign值设置为center并将textBaseline设置为“ hanging”

我很困惑，因为即使是在同一地点，Safari和chrome以及webkit和文本放置也是不同的。

Chrome看起来正确：

和Firefox一样

但是，Safari会将文本放在较低的位置（相同的代码）

知道野生动物园如何以不同的方式计算位置，以便为此建立例外？

Answer 1

适合的文字是一种痛苦。 这是一种使文本适合几乎像素完美的非标准方法。 （宽度可能需要一些宽度，有些字体只是测量的一种方式）。

此方法以大尺寸“ 100px”呈现文本，然后测量其各个部分。 您可以将其拟合为矩形，并在演示中看到四个选项。 T，H和类似的字母往往比O，G和舍入的字母短一些，您可以选择将舍入的位保留在内部或不保留，可以忽略尾部的“ y，j，g”或保留在内部。

测量功能会多次渲染文本以​​查找各个部分，如果您想获得更好的样本或使用特定字体会很麻烦，则可以将多个字母重叠。

该解决方案将适合所有具有良好画布支持的浏览器。

抱歉命名了，但是这个特殊的问题困扰我，我们在其他所有浏览器API中都获得了精美的文字，所以为什么不使用canvas ????? （SVG阵营大声笑的秘密阴谋；）我认为

两个功能。 第一个测量文本，然后返回一个包含相关信息的对象，第二个渲染文本以​​适合矩形。 请参阅底部的代码如何使用它，并设置两个控制挂尾和圆角位的标志。

 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);