javascript - HTML5 Canvas 响应不起作用

Question

我正在尝试使用 HTML5 canvas 元素 ( as shown in this image ) 绘制一组圆圈。

当我调整浏览器大小时，上图被裁剪了。我希望它在我调整浏览器大小时能够响应。

请帮我让它响应。谢谢。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.width = window.innerWidth; /// equal to window dimension
canvas.height = window.innerHeight;

var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.9;
drawClock();

function drawClock() {
  drawCircle(ctx, radius);
}

function drawCircle(ctx, radius) {
  var ang;
  var num;

  for (num = 1; num <= 40; num++) {
    ang = num * Math.PI / 20;
    ctx.rotate(ang);
    ctx.translate(0, -radius * 0.85);
    ctx.rotate(-ang);
    ctx.beginPath();
    ctx.arc(0, 0, radius / 20, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.rotate(ang);
    ctx.translate(0, radius * 0.85);
    ctx.rotate(-ang);
  }
}

#canvas {
  display: block;
}

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

Answer 1

初始化 Canvas 元素时会设置宽度和高度，因此您需要监听窗口调整大小事件并重置 Canvas 宽度和高度。

window.onresize = function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};