在html畫布上添加和刪除圖像太慢

-1

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

這是更改/隱藏鼠標控制圖像的代碼。在html畫布上添加和刪除圖像太慢

但是，正如你猜測，這是超級慢和延遲。

什麼可能是最好的方式，以便不會顯示/隱藏圖像滯後。

嘗試隱藏並顯示但不工作，可能是因爲canvas背景。畫布上的新手，並且在很長一段時間裏都在爲此而苦苦掙扎。

來源

2016-06-29 ꜱᴜʀᴇꜱʜ ᴀᴛᴛᴀ

您可以使用圖像對象緩存圖像。如果圖像很大，每次更改圖像src可能會變慢。 – modernator

它可能爲您創建一個工作片段或小提琴爲此？ – vijayP

@vijayP不幸的是:( –

你想達到什麼樣的效果 - 你的問題只是暗示在鼠標結束時顯示某種圖像＃視頻選擇？

操作DOM很慢。

，而不是...

爲boxImage快速繪製創建覆蓋你＃視頻選擇一個canvas元素：

創建#canvas元素。
將＃視頻選擇& #canvas包裝在div＃wrapper中。

使用CSS來覆蓋#canvas的視頻選擇。

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

然後收聽鼠標懸停/鼠標移開事件來顯示覆蓋畫布上boxImage：

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

來源

2016-07-05 16:30:39 markE

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

隱藏層

要暫時隱藏的層，設置它將其可見性歸於虛假。 這也會阻止任何圖層的事件觸發。

要再次顯示圖層，請將其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 });

這種技術指示用於2層爲自能見度=假「將防止任何層的事件的觸發從」鼠標懸停/淡出效果的需要。

所以也許你的boxImage層和另一個透明的單像素層。

如果這仍然太慢，你將不得不去尋找一個CSS容器可視化解決方案，而不是畫布圖紙。

來源

2016-07-12 10:25:31

在html畫布上添加和刪除圖像太慢

回答

相關問題