在滾動條頂部的位置畫布

-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

在滾動條頂部的位置畫布

回答

相關問題