HTML5 Canvas Text APIでテキストの装飾（下線など）を描くことは可能ですか？

私はHTML5キャンバスAPIを使用して文字列（canvas.fillText）を表示しています。アンダーライン、取り消し線などのテキストの装飾がキャンバスAPIで可能かどうか疑問に思っていました。残念ながら私はこれについて何も見つかりませんでした。私が見つけた唯一の解決策は、キャンバス描画APIを使って手動で装飾を行うことでした（つまり、例えば、水平線を明示的に描いて「下線」の装飾を模倣しています）。キャンバスのテキストAPIを使って何か可能ですか？HTML5 Canvas Text APIでテキストの装飾（下線など）を描くことは可能ですか？

おかげパトリック

出典

2011-01-07 Patrick Ruzand

私は答えが「いいえ」であることを言ってごめんなさい。 text methods of the HTML Canvas Contextには「テキスト装飾」や類似のスタイルはありません。

出典

2011-01-07 17:31:35 Phrogz

パトリック、あなたはまだ内部のテキストで通常のdivを使用して、実際にあなたの質問に答えないであなたのキャンバス上に置くことができますが、それは簡単で、管理しやすいです。 – Tim

@Tim優れた点。あなたは余分なテキストの装飾を得ることができるだけでなく、テキストとは異なり[サブピクセルのアンチエイリアス]（http://stackoverflow.com/questions/4550926/subpixel-anti-aliased-text-on-html5s-canvas-element）も手に入りますキャンバス上に – Phrogz

@Tim。しかし、私のテキストに回転変換があると仮定すると、CSS3変換を使用することを暗示します。この時点でキャンバスAPIに固執する必要があります。 –

組み込みメソッドでは機能しませんが、ここではこれを基にして正常に使用された単純化された関数です。 http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround/

var underline = function(ctx, text, x, y, size, color, thickness ,offset){ 
    var width = ctx.measureText(text).width; 

    switch(ctx.textAlign){ 
    case "center": 
    x -= (width/2); break; 
    case "right": 
    x -= width; break; 
    } 

    y += size+offset; 

    ctx.beginPath(); 
    ctx.strokeStyle = color; 
    ctx.lineWidth = thickness; 
    ctx.moveTo(x,y); 
    ctx.lineTo(x+width,y); 
    ctx.stroke(); 

}

出典

2013-01-23 17:36:08 Mulhoon

パトリック、あなたはそうのようなfillRectを使用して簡単に行うことができます。

ctx.fillText("Hello World", 0, 0); 
var text = ctx.measureText("Hello World"); 
ctx.fillRect(xPos, yPos, text.width, 2);

このアプローチについての唯一の難しい部分は、高さ使用のmeasureTextを取得する方法がないです。それ以外の場合は、fillRectを描画するときにY座標として使用できます。

あなたのYの位置は、テキストの高さと下線をどれだけ近づけるかによって異なります。

出典

2015-06-05 19:32:20 Garebear

HTML5 Canvas Text APIでテキストの装飾（下線など）を描くことは可能ですか？

答えて

関連する問題