-1

発射体のモーション パスをシミュレーションしています。css オーバーフロー プロパティを持つ 1 つの div と、キャンバスを使用して描画された曲線があります。モーションパスがすべての上に表示されるようにします。しかし、スクロールバーのある位置でカーブが切れてしまいます。キャンバスの 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();

それを行う方法はありますか???

4

2 に答える 2

0

キャンバスを使用する代わりに、これを行うことができます:

<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-09T11:33:07.343 に答える
0

状況がないが、あなたが言及したことに従う場合は、ここに解決策があります。

CSS の追加:

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

キャンバスでは、スクロールを効果的に機能させることができません。その下のdivの領域を占有し、スクロールが機能しないためです。

提供されたソリューションは、最悪のシナリオの場合に純粋に適用する必要があり、選択肢がなく、既存の状況で実行する必要があります。そうでなければ、それは不可能です。

于 2013-05-09T11:19:21.993 に答える