确定何时调整 canvas 的大小

Question

我正在尝试确定 canvas 何时调整大小以重新绘制它。

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

似乎 resize 事件只发送到 window — 所以调整大小事件在这里不起作用，因为 canvas 也可能在window 没有。

如何在我的 canvas 调整大小时收到通知？

Answer 1

如果您的代码的多个部分将更改您的 canvas 大小，那么您确实必须重构每个 scriptlet，以便在它更改 canvas 大小时通知您。

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

的大小

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 的大小

Determine when a canvas is resized

html

javascript

resize

canvas

dom-events