javascript - 当我们单击下划线复选框时，如何在 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 上下文的文本方法中没有“文本装饰”或类似的可用。您可以将其设为粗体或倾斜（通过 fontStyle 属性），但下划线不可用。

但它们存在一种解决方法，在此处进行了解释。