Javascript 确定画布何时调整大小

我试图确定何时调整

画布的大小以重新绘制它

上下文：我的
canvas
插入到flex布局中，其高度由flexbox模型设置，并根据内容和大小可能动态变化的其他布局元素而变化（例如，AJAX请求的结果在附近的范围内插入文本，这会导致
canvas
垂直增长10像素）

似乎
resize
事件只发送到窗口-因此resize事件在这里不起作用，因为当窗口不起作用时，画布也可能改变其大小

当我的
画布
调整大小时，如何得到通知？
如果您的代码的多个部分将更改画布大小，那么您确实必须重构每个scriptlet，以便在更改画布大小时通知您

一种简单的方法是创建一个调整大小的函数，任何scriptlet都必须使用该函数来调整画布的大小。如果调用了该函数，您就知道scriptlet已经调整了画布的大小：

function resizeCanvas(canvas,w,h){
    canvas.width=w;
    canvas.height=h;
    // All canvas resizing will flow to this point
    // so respond to the resizing here.
    console.log('The canvas has been resized');
}

尝试将
canvas
的
height
和
width
存储在变量中，并在每次AJAX请求后检查它们。如果其中一个tham改变了->用新的大小重新绘制画布（别忘了存储新的值！）。是的，问题是，AJAX请求是否只是改变大小的几种方法之一。理想情况下，我不想手动跟踪所有方式。谢谢mark。问题是，我必须找到每一段代码，这些代码可能会产生副作用，布局发生了变化，画布的大小也发生了变化。这很麻烦。是的，但你是一个编码员，这就是我们编码员在面对设计需求时所做的。喝杯咖啡，然后去喝！！：-）我怀疑你对你的任务过分恐惧了。将代码放入文本编辑器中，然后“查找”
.width
和
.height
。这些是手动调整画布大小的唯一方法。将这些更改为对
resizeCanvas
的调用，然后（正如@AndrewEvt在评论中所说）监听
window.onresize
并通过浏览器检查画布宽度/高度的更改。如果注意到更改，请调用
resizeCanvas
。这不是一项可怕的任务画布的大小由flexbox布局自动更改，以响应同一布局中其他元素的更改。我自己从不直接改变画布的大小。Flexbox容器会根据用户调整窗口大小而触发更改。因此，监听window.onresize（以及移动设备上可能的重定向事件）将捕获flexbox对您的子画布所做的更改。