html - 在 HTML5 Canvas 中隐藏灰线

Question

请看jquery签名板插件:

http://thomasjbradley.ca/lab/signature-pad/require-drawn/

注意签名框内的水平灰线:

我想摆脱它，但一直没能做到。这是 html 元素:

<canvas class="pad" width="198" height="55"></canvas>

这是CSS:

.pad {
  position: relative;
}

.current .pad {
  /**
   * For cross browser compatibility, this should be an absolute URL
   * In IE the cursor is relative to the HTML document
   * In all other browsers the cursor is relative to the CSS file
   *
   * http://www.useragentman.com/blog/2011/12/21/cross-browser-css-cursor-images-in-depth/
   */
  cursor: url("../Images/pen.cur"), crosshair;
  /**
   * IE will ignore this line because of the hotspot position
   * Unfortunately we need this twice, because some browsers ignore the hotspot inside the .cur
   */
  cursor: url("../Images/pen.cur") 16 16, crosshair;

  -ms-touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

这让我发疯。我已经在 Chrome 开发工具中使用了 45 分钟，但找不到造成这条灰线的原因。请帮忙。

Answer 1

在 javascript 中，您可以将线宽设置为 0 或将其颜色设置为“#fff”。

例如:$('.sigPad').signaturePad({lineWidth:0 })

有用的文档:http://thomasjbradley.ca/lab/signature-pad/#options