html - 在 HTML5 Canvas 中隐藏灰线

标签 html css html5-canvas

请看jquery签名板插件:

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

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

enter image description here

我想摆脱它,但一直没能做到。这是 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 分钟,但找不到造成这条灰线的原因。请帮忙。

最佳答案

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

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

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

关于html - 在 HTML5 Canvas 中隐藏灰线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21691201/

相关文章:

css - 提取主题感知样式的 CSS 差异

html - 如何使用线性渐变实现两个选项卡

javascript - Fabric JS : Set X Y Coordinates in Canvas Image | Set Position in Canvas Image

html - 如何删除 html 表格单元格中的多余空格?

javascript - 如何 : make text move on 3d circular surface in css3?

html - 表格的内边框在 Internet Explorer 9 (IE 9) 中不会拉伸(stretch)整个表格

javascript - 如何为数组的每一项添加CSS样式

javascript - 如何将图像分成几 block

javascript - 网络 worker 和 Canvas

html - 围绕内容包装一个 DIV 并使其居中