用于canvas的JavaScript事件调整大小 [英] JavaScript event for canvas resize

问题描述

看起来，更改画布的尺寸会清除已在该画布上完成的任何绘图。

在画布上调整大小时触发的事件

解决方案

你通常不想严格检查一个resize事件，当你做一个动态调整大小，像$（window）.resize在jQuery和迄今为止我知道没有原生resize事件上的元素（在窗口）。我会检查它的间隔：

  function onResize（element，callback）{
 var elementHeight = element。 height，
 elementWidth = element.width; 
 setInterval（function（）{
 if（element.height！== elementHeight || element.width！== elementWidth）{
 elementHeight = element.height; 
 elementWidth = element.width; 
 callback（）; 
} 
}，300）; 
} 
 
 var element = document.getElementsByTagName（canvas）[0]; 
 onResize（element，function（）{alert（Woo！）;}）; 
  

It appears that altering the dimensions of a canvas clears any drawing already done on that canvas.

Is there an event that fires on canvas resize, so I can hook it and redraw when it occurs?

解决方案

You usually don't want to strictly check for a resize event because they fire a lot when you do a dynamic resize, like $(window).resize in jQuery and as far I'm aware there is no native resize event on elements (there is on window). I would check it on an interval instead:

function onResize( element, callback ){
  var elementHeight = element.height,
      elementWidth = element.width;
  setInterval(function(){
      if( element.height !== elementHeight || element.width !== elementWidth ){
        elementHeight = element.height;
        elementWidth = element.width;
        callback();
      }
  }, 300);
}

var element = document.getElementsByTagName("canvas")[0];
onResize( element, function(){ alert("Woo!"); } );

这篇关于用于canvas的JavaScript事件调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！