Canvas 如何调整画布的大小而不闪烁？

当窗口调整大小或具有白色边框时，三个.js示例中的许多都会闪烁。例如：

---

另一方面，屏幕不会闪烁。这是如何实现的？

AFAICT三个.JS示例中的大多数都是通过查看窗口大小或容器大小，然后将canvas.width、canvas.height设置为匹配来手动设置画布的大小

另一方面，包括WebGL水族馆在内的TDL示例使用CSS让浏览器缩放画布，然后在requestAnimationFrame回调中更新画布背景存储的大小

这里有一个例子

const gl=document.querySelector（#c”）.getContext（“webgl”）；
函数render（）{
resizeCanvasToDisplaySize（总图画布）；
总图视口（0，0，总图画布宽度，总图画布高度）；
//使用在边缘周围绘制2像素的边框
//剪式测试，因为它比设置更容易
//很多东西
gl.clearColor（1,0,0,1）；//红色
gl.禁用（gl.剪刀试验）；
总账清除（总账颜色缓冲位）；
总帐启用（总帐剪刀测试）；
gl.剪刀（2，2，gl.canvas.width-4，gl.canvas.height-4）；
gl.clearColor（0,0,1,1）；//蓝色
总账清除（总账颜色缓冲位）；
请求动画帧（渲染）；
}
请求动画帧（渲染）；
函数resizeCanvasToDisplaySize（画布）{
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
if（canvas.width！==宽度| | canvas.height！==高度）{
画布宽度=宽度；
canvas.height=高度；
}
}

正文{
保证金：0；
}
#c{
宽度：100vw；
高度：100vh；
显示：块；
}

---

AFAICT三个.JS示例中的大多数都是通过查看窗口大小或容器大小，然后将canvas.width、canvas.height设置为匹配来手动设置画布的大小

另一方面，包括WebGL水族馆在内的TDL示例使用CSS让浏览器缩放画布，然后在requestAnimationFrame回调中更新画布背景存储的大小

这里有一个例子

const gl=document.querySelector（#c”）.getContext（“webgl”）；
函数render（）{
resizeCanvasToDisplaySize（总图画布）；
总图视口（0，0，总图画布宽度，总图画布高度）；
//使用在边缘周围绘制2像素的边框
//剪式测试，因为它比设置更容易
//很多东西
gl.clearColor（1,0,0,1）；//红色
gl.禁用（gl.剪刀试验）；
总账清除（总账颜色缓冲位）；
总帐启用（总帐剪刀测试）；
gl.剪刀（2，2，gl.canvas.width-4，gl.canvas.height-4）；
gl.clearColor（0,0,1,1）；//蓝色
总账清除（总账颜色缓冲位）；
请求动画帧（渲染）；
}
请求动画帧（渲染）；
函数resizeCanvasToDisplaySize（画布）{
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
if（canvas.width！==宽度| | canvas.height！==高度）{
画布宽度=宽度；
canvas.height=高度；
}
}

正文{
保证金：0；
}
#c{
宽度：100vw；
高度：100vh；
显示：块；
}

---

调整窗口大小后，需要立即调用render

---

更好的是，您可以使用

requestAnimationFrame

，在一个函数调用中调整大小并进行渲染。它将确保回流和渲染在一次回流中直接进行，而不是分开进行，从而导致闪烁。

调整窗口大小后，需要立即调用渲染

function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.render(scene, camera);
    }

更好的是，您可以使用

requestAnimationFrame

，在一个函数调用中调整大小并进行渲染。它将确保回流和渲染在一次回流中立即发生，而不是单独发生，从而导致闪烁

function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.render(scene, camera);
    }