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

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

但正如你所猜测的那样，这是非常缓慢和延迟的

最好的方式是什么，这样就不会延迟显示/隐藏图像

---

尝试隐藏和显示但不起作用，可能是因为画布上下文。不熟悉拉票，长期以来一直在努力解决这个问题。

你想达到什么目的？你的问题只是暗示当你的鼠标在视频选择上时，会显示某种图像

操作DOM很慢

相反

创建一个画布元素，覆盖您的#视频选择，以更快地绘制

boxImage

：

• 创建一个#canvas元素
• 将#视频选择和#画布包装在div包装中
• 使用CSS用画布覆盖视频选择
  隐藏层
  若要临时隐藏图层，请将其“可见”特性设置为false。这也将防止触发层的任何事件
  若要再次显示图层，请将其“可见”特性设置为true
  试验

  
  //这一层应该是不可见的
  $（'canvas'）.drawRect({
  图层：对，
  可见：false，//**false隐藏且无事件。true显示**
  填充样式：“#585”，
  x:100，y:100，
  宽：100，高：50
  });
  

  这项技术表明需要两层鼠标覆盖/移出效果，因为visibility=false“将防止触发该层的任何事件”
  所以也许你的boxImage层和另一个透明的单像素层

  ---

  如果这仍然太慢，您将不得不使用css可见性解决方案，该解决方案在容器而不是画布图形上运行
  可以使用图像对象缓存图像。如果图像较大，每次更改图像src可能会很慢。您是否可以为此创建一个工作片段或小提琴？@vijayP不幸的是，否：（好的。你所说的鼠标控制是什么意思。你想说鼠标指针还是鼠标箭头？而且一旦鼠标指针在画布区域上，你就不想显示它了？让多层画布相互重叠，并根据你的要求显示和隐藏画布将有助于提高性能。

  $("#video-section").mouseout(function(){
          canvas.remove(boxImage);
  });
  $("#video-section").mouseover(function(){
      canvas.add(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);
  });