Question

我创建了一个内部有圆圈的画布，并用渐变填充它。

我不确定如何根据屏幕尺寸制作画布以及画布内的圆圈。

我尝试使用vh和vw作为画布的宽度和高度。但是，当我更改窗口的高度或宽度时，圆看起来太长或太宽。

问题：

当窗口尺寸减小时，我希望整个圆的尺寸减小。我不确定该怎么做。

代码：

var c = document.getElementById('canvassun');
var ctx = c.getContext('2d');
var grd = ctx.createRadialGradient(85, 85, 20, 85, 85, 70);
grd.addColorStop(0, 'red');
grd.addColorStop(0.5, 'orange');
grd.addColorStop(0.8, 'yellow');
grd.addColorStop(1, 'white');
ctx.beginPath();
ctx.fillStyle = grd;
ctx.arc(90, 90, 70, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath;

#canvassun {
  height: 30vh;
  width: 14vw;
  border: 1px solid black;
  margin: 0 auto;
  display: block;
  margin-top: 18%;
}

<canvas id="canvassun" width=170 height=170></canvas>

Answer 1

收听窗口resize event并重新绘制画布

function draw() {
  var c = document.getElementById('canvassun');
  var ctx = c.getContext('2d');
  var grd = ctx.createRadialGradient(85, 85, 20, 85, 85, 70);
  grd.addColorStop(0, 'red');
  grd.addColorStop(0.5, 'orange');
  grd.addColorStop(0.8, 'yellow');
  grd.addColorStop(1, 'white');
  ctx.beginPath();
  ctx.fillStyle = grd;
  ctx.arc(90, 90, 70, 0, 2 * Math.PI);
  ctx.fill();
  ctx.closePath;
}


window.addEventListener("resize", draw);

注意，可能您需要debounce draw函数以提高性能

使画布具有形状响应性

1 个答案: