Canvas元素存在内边距与滚动条问题，求解决方案

你的问题核心是浏览器默认样式和窗口尺寸计算的细节没处理到位，以下是直接可行的修复方案：

问题根源 #

• 浏览器默认给body设置了8px左右的margin，即便canvas样式清零，body的边距仍会导致页面出现空白和滚动条
• window.innerWidth/innerHeight会包含滚动条的宽度/高度，当页面出现滚动条时，这个值会让canvas尺寸超出视口，进一步加剧问题

修复步骤 #

1. 重置全局默认样式 #

给body添加样式，彻底清除默认边距并锁定页面视口：

body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 不需要页面滚动时添加，彻底消除滚动条 */
}

canvas {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

2. 修正窗口尺寸计算 #

改用document.documentElement.clientWidth/clientHeight获取视口尺寸，这个值不会包含滚动条，能准确匹配页面可用空间：

// 替换原尺寸获取代码
var window_height = document.documentElement.clientHeight;
var window_width = document.documentElement.clientWidth;

3. 可选：适配窗口大小变化 #

如果需要窗口调整时canvas自动适配，添加resize监听：

window.addEventListener('resize', function() {
  window_height = document.documentElement.clientHeight;
  window_width = document.documentElement.clientWidth;
  canvas.width = window_width;
  canvas.height = window_height;
});

完整修正代码 #

HTML #

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

CSS #

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

canvas {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

JavaScript #

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
var window_height = document.documentElement.clientHeight;
var window_width = document.documentElement.clientWidth;
canvas.width = window_width;
canvas.height = window_height;
canvas.style.background = "yellow";


class circle {
    constructor(xpos, ypos, radius, color, speed) {
        this.xpos = xpos;
        this.ypos = ypos;
        this.radius = radius;
        this.color = color;
        this.dx = speed;
        this.dy = speed;
    } 
    draw(ctx) {
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = this.color;
        ctx.arc(this.xpos, this.ypos, this.radius, 0, Math.PI * 2, false);
        ctx.stroke();
        ctx.closePath();
    } 
    update(ctx) {
        this.draw(ctx);
        if (this.xpos + this.radius > window_width) {
            this.dx = -this.dx
        } 
        if (this.xpos - this.radius < 0) {
            this.dx = -this.dx
        } 
        if (this.ypos + this.radius > window_height) {
            this.dy = -this.dy
        } 
        if (this.ypos - this.radius < 0) {
            this.dy = -this.dy
        }
        this.xpos += this.dx;
        this.ypos += this.dy;
    }
}
let myCircle = new circle(100, 100, 30, "red", 10);
let updateCircle = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    myCircle.update(ctx);
    requestAnimationFrame(updateCircle);
}
updateCircle();

额外小提示：updateCircle函数不需要传myCircle参数，直接调用updateCircle()即可；画圆用Math.PI * 2代替360更符合Canvas的弧度规范。

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