问题原因是在重置Canvas大小后,Canvas实际上并没有重新绘制所有图形。为了解决这个问题,我们可以使用下面的方法:
// 获取Canvas元素 let canvas = document.getElementById("myCanvas");
// 设置Canvas的宽度和高度 canvas.width = window.innerWidth; canvas.height = window.innerHeight;
// 获取Canvas元素 let canvas = document.getElementById("myCanvas");
// 设置Canvas的宽度和高度 canvas.width = window.innerWidth; canvas.height = window.innerHeight;
// 获取Canvas的上下文 let context = canvas.getContext("2d");
// 在视窗大小改变时重新绘制Canvas window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; redrawCanvas(); });
// 需要重新绘制的图形,放在下面的函数中 function redrawCanvas() { // 在这里重新绘制Canvas的图形 context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = "red"; context.fillRect(0, 0, canvas.width, canvas.height); }
以上代码示例中,我们在Canvas元素上添加了一个ID,并对其设置了宽度和高度。然后,我们添加了一个resize事件监听器,当视窗大小改变时,Canvas的宽度和高度将被重置,并重新绘制Canvas上的图形。
注意,我们需要把需要重新绘制的图形放在redrawCanvas()函数中,确保在Canvas被重置后被正确地重新绘制。