Question

我有一个包含文本的div元素，我想要消灭整个元素，以便两条线交叉作为符号X.

text-decoration:line-through

Strikeout文字不合适。

我想要一个45度的线。我希望借助画布可以实现这一点。

Answer 1

HTML：

<div id="con" style="position:relative;">
  <canvas id="canvas" style="position:absolute; top:0; left:0; z-index:0;">
  </canvas>
  <div id="text">
  .....
  </div>
</div>

JS：

  var width = document.getElementById('text').offsetWidth;
  var height = document.getElementById('text').offsetHeight;
  var canvas = document.getElementById('canvas');
  canvas.width = width;
  canvas.height = height;
  var context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(width, height);
  context.moveTo(width, 0);
  context.lineTo(0, height);
  context.stroke();

怎么打出div

1 个答案: