Hinzufügen und Entfernen von Bild auf HTML-Canvas ist zu langsam

Question

Das ist der Code zum Ändern/Verbergen des Bildes der Maussteuerung.

Aber wie Sie vermutet, ist das super langsam und verzögert.

Was könnte der beste Weg sein, so dass es kein Nachhinken des Zeigens/Verbergens des Bildes geben wird.

Versuchte ausblenden und zeigen, aber nicht funktioniert, möglicherweise liegt es an Canvas Kontext. Neu in den Leinwänden und damit kämpfen von so langer Zeit.

Answer 1

Was versuchen Sie zu erreichen - Ihre Frage deutet nur auf eine Art von Bild, wenn Ihre Maus vorbei ist # Video-Auswahl?

Die Manipulation des DOM ist langsam.

Statt ...

erstellen Canvas-Element dabei deine # Video-Auswahl für eine schnellere Darstellung boxImage:

• ein #canvas Element erstellen.
• Wickeln Sie die # Video-Auswahl & #canvas in einem div # Wrapper.

• Verwenden Sie CSS, um die # Videoauswahl mit #canvas abzudecken.

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

Dann für Mouseover/mouseout Ereignisse hören boxImage auf den Abdeckplanen anzuzeigen:

// 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/

Hiding Schichten

vorübergehend eine Schicht zu verbergen , Stell es ein s sichtbare Eigenschaft zu false. Dadurch wird auch verhindert, dass Ereignisse der Ebene auslösen.

Um die Ebene erneut anzuzeigen, legen Sie die Eigenschaft visible auf true fest.

-Test // 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 });

Diese Technik zeigt die Notwendigkeit für zwei Schichten für eine Mouseover/out-Effekt, da die Sichtbarkeit = false „wird jede der von auslösenden Ereignisse der Schicht verhindern“.

Also vielleicht Ihre BoxImage-Ebene und eine andere transparente Einzel-Pixel-Ebene.

Wenn das immer noch zu langsam ist, müssen Sie sich für eine CSS-Sichtbarkeitslösung entscheiden, die auf den Containern und nicht auf den Arbeitsflächenzeichnungen ausgeführt wird.