Javascript 如何全屏显示我的画布&；让它填满屏幕？

我有一个HTML5画布，当它进入全屏时，它不会填满整个屏幕

如果我只更改canvas.style.width/height，那么它可以工作，但显示效果不好，而且鼠标坐标也放错了位置

js

css

编辑：您可以在下载测试文件时尝试添加：

canvas.width = screen.width;
canvas.height = screen.height;

---

canvas.width和canvas.style.width是两个不同的东西。第一个调整画布上下文的大小，而第二个调整画布的表示。

如果我这样做，显示结果会出错。（您可以在此处下载测试文件并按F键进行检查）我需要画布占据整个屏幕，但是画布渲染区域应为720p（1280x720）；canvas.width=rect.width；canvas.height=rect.height；似乎保持了1280 x 768的画布大小，但图形有点模糊，鼠标坐标错误。

:-webkit-full-screen { width: 100%; height: 100%; background: #000; }

canvas.width = screen.width;
canvas.height = screen.height;