htmlキャンバスで画像を追加したり削除したりするのが遅すぎる

Question

$("#video-section").mouseout(function(){ 
     canvas.remove(boxImage); 
}); 
$("#video-section").mouseover(function(){ 
    canvas.add(boxImage); 
}); 

これは、マウスコントロールの画像を変更/非表示するためのコードです。

あなたが推測したように、それは遅くて遅いです。

画像の表示/非表示の遅れがないようにするには、どのような方法が最適でしょうか。

キャンバスコンテキストのために非表示にして表示しても動作しない可能性があります。キャンバスを初めて見て、これからずっと苦労しています。

Answer 1

あなたは何を達成しようとしていますか？あなたの質問はマウスがビデオ選択よりも上になったときに何らかの画像を表示することを示唆していますか？

DOMの操作が遅いです。

代わりに...

はboxImageの速い描画のためのあなたの＃ビデオ選択をカバーするcanvas要素を作成します。

• #canvas要素を作成します。
• ＃video-selectionを両方ともラップします。& #canvas in div #wrapper。

• CSSを使用して#canvasで＃video-selectionをカバーします。

  は次にカバーキャンバス上boxImage表示するマウスオーバー/マウスアウトイベントをリッスン

  <div id=wrapper width=320 height=240> 
      <div id='video-selection' width=320 height=240></div> 
      <canvas id=canvas width=320 height=240></canvas> 
  </div> 
  
  #wrapper{position:relative;} 
  #video-selection, #canvas{position:absolute;} 
  

：

// canvas related vars 
var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 
var cw=canvas.width; 
var ch=canvas.height; 

// set where boxImage will be drawn on the canvas 
var boxX=20; 
var boxY=30; 

// on mouseout, clear boxImage off the canvas 
$("#video-section").mouseout(function(){ 
    context.clearRect(0,0,cw,ch); 
}); 

// on mouseover, draw boxImage on the canvas 
$("#video-section").mouseover(function(){ 
    context.drawImage(boxImage,boxX,boxY); 
}); 

Answer 2

http://projects.calebevans.me/jcanvas/docs/addLayers/

隠蔽層を

一時層を非表示にします、 それを設定しますvisibleプロパティをfalseに設定します。 これにより、レイヤのイベントのいずれかがトリガーされないようになります。

レイヤーを再度表示するには、visibleプロパティをtrueに設定します。

テスト // This layer should be invisible $('canvas').drawRect({ layer: true, visible: false, // ** false hides and no events. true shows. ** fillStyle: '#585', x: 100, y: 100, width: 100, height: 50 });

この技術は、可視= false「のトリガーから層のイベントのいずれかを防止する」のでマウスオーバー/アウト効果のために2層の必要性を示しています。

boximageレイヤーともう1つ透明な単一ピクセルレイヤー。

まだ遅すぎる場合は、キャンバスの図面ではなく、コンテナで動作するCSSの可視性ソリューションを用意する必要があります。