Question

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

这是更改/隐藏鼠标控制图像的代码。

但正如你猜测那是超级慢和延迟。

可能是最好的方式，以便不会显示/隐藏图像。

尝试隐藏和显示但不工作，可能是因为画布上下文。画布的新手，并在很长一段时间内与此作斗争。

Answer 1

你想要实现什么 - 你的问题只是暗示当你的鼠标结束时显示某种形象？视频选择？

操纵DOM很慢。

，而不是...

创建一个覆盖＃video-selection的画布元素，以便更快地绘制boxImage：

创建一个#canvas元素。
包装＃video-selection＆amp; #canvas在一个div #wrapper。

使用CSS覆盖#canvas的＃video-selection。

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

然后侦听mouseover / mouseout事件以在覆盖画布上显示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);
});

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

此技术表明需要2层鼠标悬停/效果，因为visibility = false“将阻止任何图层的事件触发”。

所以也许你的boxImage图层和另一个透明的单像素图层。

如果仍然太慢，你将不得不寻求一个对容器而不是画布图纸进行操作的css可见性解决方案。

在html画布上添加和删除图像太慢了

2 个答案: