在滚动条顶部的位置画布

-1

我模拟了一个抛射体运动路径。我有一个与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();

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

来源

2013-05-09 Nitesh Patil

如果你没有任何情况，但要去你所提到的，这里是solution。

加在CSS：

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

用帆布，你不能滚动，以有效地开展工作。因为它会占据它下方的div区域，并且不会使滚动工作。

提供的解决方案必须纯粹应用于最坏情况的情况下，在这种情况下，您没有选择权，必须在现有环境下进行。否则，这是不可能的。

来源

2013-05-09 11:19:21 Nitesh

滚动条在您的解决方案中不起作用。我希望它工作，因为我在提到的问题 – 2013-05-09 12:42:11

按上滚动条的顶部和底部箭头工作。它不会按照你想要的方式工作，因为帆布是你画一条线的方形天气块，甚至是一个延伸宽度和高度的点。 CANVAS将无法在其下面的DIV上滚动。 - @Nitesh – Nitesh 2013-05-09 12:44:37

嘿为什么你没有勾选绿色标记:( - @Nitesh – Nitesh 2013-05-10 05:03:07

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

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

遗存重量轻，滚动也工作正常。

来源

2013-05-09 11:33:07 Janak

我添加了jsfiddle演示来显示我的问题，我正在模拟一个子弹运动路径，所以我不能使用transform属性。 – 2013-05-09 12:40:03

在滚动条顶部的位置画布

回答

相关问题