如何在HTML中修改Canvas尺寸？游戏开发调整至1024×576

你的代码存在两处关键问题，导致无法正确设置Canvas的目标尺寸：

1. JavaScript选择器拼写错误 #

document.querySelectory是笔误，正确写法为document.querySelector。

2. HTML中的Canvas未指定对应ID #

你的JS代码通过#canvas选择元素，但HTML里的<canvas>标签没有设置id="canvas"，导致无法获取到目标DOM元素。

另外，建议确保JS代码在DOM加载完成后执行，避免出现元素未加载就执行代码的情况。

修正后的完整代码： #

HTML部分

<canvas id="canvas"></canvas>

JavaScript部分

// 等待DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.querySelector('#canvas');
  const c = canvas.getContext('2d');

  canvas.width = 1024;
  canvas.height = 576;

  // 可添加测试绘制，验证尺寸是否生效
  c.fillStyle = '#ff0000';
  c.fillRect(0, 0, canvas.width, canvas.height);
});

修改后Canvas就能正确设置为1024×576的尺寸了。

内容的提问来源于stack exchange，提问作者Jhon134