Question

我正在尝试使用HTML5 canvas元素绘制一组圆圈（如图1所示）。 enter image description here

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

请帮助我做出回应。谢谢。

＆＃13;

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);
  }
}

＆＃13;

#canvas {
  display: block;
}

＆＃13;

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

＆＃13;

Answer 1

如果我遇到这个问题，我就是这样做的：

＆＃13;

class

＆＃13;

Answer 2

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

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

HTML5画布响应不起作用

2 个答案: