キャンバステキストの垂直方向の整列

私はキャンバスベースのアプリケーションで作業していますが、私はテキストの垂直方向の整列にいくつかの問題があります。私は浮動小数点座標を使用していますが、これは問題の原因だと思います。私は確信していませんが、それにもかかわらず解決策を探しています。とにかく、私は正方形の文字「O」を表示するために使用するコードは、例えば、次のとおりですキャンバステキストの垂直方向の整列

context.fillRect(0, 0, 21.864951768488744, 21.864951768488744); 
context.textBaseline = 'middle'; 
context.textAlign = alignLeft ? 'left' : 'center'; 
context.fillText('O', 10.932475884244372, 10.932475884244372);

キャンバス上の結果が「O」が水平に中心が、約1配置されていることである - 2中央より上のピクセル。

誰もがこれについて考えていますか？

出典

2016-09-02 Peter

フォントが実際に自然に中央ではない可能性がありますか？どのフォントを使用していますか？いくつかのフォントは、異なるシステム上で目立って異なる位置に表示されることがあります（時には驚くほど厄介です）。 – DBS

私はArialを使用しています。 – Peter

縦の位置合わせは、フォントのベースラインを参照します。それぞれのキャラクターは、垂直にセンタリングされていません。または、テキストのディップ＆ライズキャラクターが表示されます。背の高い文字である大文字の「O」は、同じフォントの短い文字よりも垂直方向に伸びやすいでしょう。 – markE

実際にテキストを書き込むときに浮動座標に問題があるようです。たとえば、http://codepen.io/petor/pen/NRPgVqのように、テキストはサブピクセル座標には表示されず、丸められた座標に配置されます（少なくともChromeでは）。

<!DOCTYPE html> 
<html> 
<body> 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
<script> 
var c = document.getElementById("myCanvas"); 
var context= c.getContext("2d");; 
context.font = "10px Arial"; 
context.fillText('O', 0, 10); 
context.fillText('O', 10, 10.1); 
context.fillText('O', 20, 10.2); 
context.fillText('O', 30, 10.3); 
context.fillText('O', 40, 10.4); 
context.fillText('O', 50, 10.5); 
context.fillText('O', 60, 10.6); 
context.fillText('O', 70, 10.7); 
context.fillText('O', 80, 10.8); 
context.fillText('O', 90, 10.9); 
context.fillText('O', 100, 11); 
</script> 
</body> 
</html>

出典

2016-09-05 12:17:45 Peter

デセンダーのある文字のためのスペースが残っています。私が何を意味するかを見るために、 "y"のようなディセンダを持つものを追加してください。

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
<script> 
var c = document.getElementById("myCanvas"); 
var context= c.getContext("2d"); 
context.fillStyle = "#FF0000"; 
context.fillRect(0, 0, 21.864951768488744, 21.864951768488744); 
context.font = "10px Arial"; 
context.fillStyle = "#FFffff"; 
context.textBaseline = 'middle'; 
context.textAlign = 'center'; 
context.fillText('Oy', 10.932475884244372, 10.932475884244372); 
</script> 
</body> 
</html>

出典

2016-09-02 14:48:22 mab

このように見えるかもしれませんが、テキスト 'Oy'を書くと、。あなたが与えている例では、テキストは中央の1ピクセル下に置かれています。また、他のコメントでも触れましたが、大きな文字を使用すると変位は1〜2ピクセルですので、ミスアライメントはスケーリングされません。だから、私にはまだ、ディセンダのものより丸め問題のようなものがあります。 – Peter

一方、テキスト 'Oy'のOは、テキスト 'O'と同じy座標に配置されます。ディセンダーには余裕がありますが、これを知っていても、1〜2ピクセルのミスアライメントを解決する方法について、より多くの洞察を得ることはできません。テキストは単純に（正確に）中央にない。 – Peter

キャンバステキストの垂直方向の整列

答えて

関連する問題