javascript - 将画布放在滚动条的顶部

Question

我正在模拟弹丸运动路径。我有一个具有 css 溢出属性的 div 和一条使用画布绘制的曲线。我希望运动路径出现在所有内容的顶部。但是曲线在滚动条所在的位置被剪切。如果我将画布 z-index 更改为最大值或类似的东西以使画布出现在顶部然后滚动条不起作用......这是我的问题JSFIDDLE Demo的 jsfiddle 演示

以下是我的 javascript 代码：

  var canvas = document.getElementById('canvasTron');
  var context = canvas.getContext('2d');

  context.beginPath();
  context.moveTo(100, 150);
  context.lineTo(350, 50);
  context.stroke();

有没有办法做到这一点？？？

Answer 1

如果您没有情况，但要按照您所提到的，这里是解决方案。

CSS中的添加：

#canvasTron{position:absolute; clip: rect(48px, 351px, 151px, 99px);}

使用画布，您无法让滚动有效地工作。因为它将占据其下方该 div 的区域并且不会使滚动工作。

提供的解决方案必须完全应用于最坏情况的情况下，在这种情况下您别无选择，必须在现有情况下这样做。否则，这是不可能的。

Answer 2

而不是使用画布，你可以这样做：

<div id="canvasTron"></div>

canvasTron
{
     position:absolute;
     width:0px;
     height:200px;
     border:2px solid black;
     transform:rotate(50deg);
    -webkit-transform:rotate(50deg);
    -ms-transform:rotate(50deg);
    -o-transform:rotate(50deg);
    -moz-transform:rotate(50deg);
    left:180px;
}

重量仍然很轻，滚动也可以正常工作。