Question

我模拟了一个射弹运动路径。我有一个带有css溢出属性的div和一个使用canvas绘制的曲线。我希望运动路径出现在一切的顶部。但曲线会在滚动条的位置被切断。如果我将画布z-index更改为最大或类似的东西，使画布显示在顶部，那么滚动条不起作用...这是我的问题的{jsfiddle演示JSFIDDLE Demo

以下是我的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

如果你没有任何情况，但是按照你提到的那样，这里是solution。

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;
}

重量轻，滚动也很好。

在滚动条顶部定位画布

2 个答案: