1

要素をいじっていて、キャンバスにテキストを配置すると低すぎることがわかりました。

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var imageObj = new Image();

  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
    context.textBaseline = 'top';
    context.font = 'normal 50px Arial';
    context.fillText("1AFG", 0, 0);
  };
  imageObj.src = 'http://planttagmaker.herobo.com/images/tag_templates/hibiscus_template.png';

テキストは、キャンバスの上部から 10 ～ 20 ピクセル下に配置されています。誰かが理由を説明できますか？私はおそらくベースラインを誤解していると確信しています。基本的に、テキストをキャンバスの上部に配置したいと考えています。X 座標と Y 座標は動的であるため、Y 座標から 10 ピクセルまたは 20 ピクセルを減算するだけでは解決できません。

お時間をいただきありがとうございます、トッド

4

2 に答える 2

3

ピクセル単位のフォントサイズをポイントに変換することで成功しました。これにより、テキストのピクセルの高さが得られます( http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/ )。次に、その値を y 位置に使用し、textBaseline をデフォルトのアルファベット順のままにしました。

コードは次のとおりです。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function () {
    var fontSize = 50;
    context.drawImage(imageObj, 0, 0);
    context.font = 'normal ' + fontSize + 'px Arial';
    context.fillText("1AFG", 0, pixelsToPoints(fontSize));
};
imageObj.src = 'http://planttagmaker.herobo.com/images/tag_templates/hibiscus_template.png';

function pixelsToPoints(pixels) {
    return pixels * 72 / 96;
}

http://jsfiddle.net/5Mxez/で例を見ることができます。これは、フォント サイズをスケーリングすると機能するはずです。

于 2013-02-18T02:04:24.283 に答える
1

適切な場所に配置しています。テキストは、フォント サイズで定義された高さ全体を占めません (つまり、50px の高さにはなりません)。表示される高さは で定義されline-heightます。line-heightしたがって、テキストを一番上に配置するには、フォント サイズよりも小さいサイズを定義する必要があります。

通常、これは次のように行われます。

normal 50px/45px Arial

2 番目の数字はline-heightです。これは の仕様で確認<canvas>できますが、機能させることができません。

しかし、line-heightそれはあなたが求めているものです。で動作することを示すデモを次に示します<div>。私はまだそれを で動作させようとしてい<canvas>ます。

デモ： jsフィドル

HTML:

<div id="myDiv">1AFG</div>
<canvas id="myCanvas"></canvas>

CSS:

#myDiv {
    background-image: url( 'http://placekitten.com/100' );
    width: 100px;
    height: 100px;
    font: 50px/40px Arial;
}

脚本：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
    context.textBaseline = 'top';
    context.font = '50px/40px Arial';
    context.fillText("1AFG", 0, 0);
};
imageObj.src = 'http://placekitten.com/100';
于 2013-02-18T01:37:13.213 に答える