當我們單擊下划線復選框時，如何在jcanvas jquery中的文本下划線

Question

我正在創建一種類型的編輯器，當用戶在文本區域中輸入文本並單擊添加文本時，他/她的文本將被添加到畫布中。 因此，我需要一個選項，如果用戶想在特定文本下划線，他也可以這樣做。在這里，我為“下划線”選項添加了復選框。 我已經使用Jcanvas jquery做到了。

我的html代碼是：

<input type="checkbox" id="Underline"  name="Underline" value="">Underline Add text<textarea id="add_text" ></textarea>   
<button onclick="addText()">add text</button>
<canvas id="maincanvas" width="500" height="400" style="background-color: #FFF;"> </canvas>

JavaScript代碼：

function addText(){
    var textvalue=document.getElementById("add_text");
    var $canvas = $("#maincanvas");

    $canvas.drawText({
      draggable: true,
      name: "demo",
      layer: true,
      fillStyle: "#000",
      x: 90,
      y: 10,
      text: textvalue,
    });
}

Answer 1

HTML Canvas Context的文本方法中沒有“文本裝飾”或類似內容。 您可以將其設置為粗體或斜體（通過fontStyle屬性），但是下划線不可用。

但是它們存在解決方法， 在此進行了說明 。