是否可以使用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 2011-01-08 16:34:07

它不會使用內置方法，但是這裏是一個簡化的函數，我在讀取它的基礎上成功使用。 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繪製文字裝飾（下劃線等）？

回答

相關問題