时间戳

首页 > 解决方案 > 使具有形状响应的画布

javascript - 使具有形状响应的画布

问题描述

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

我不确定如何使画布以及画布内的圆圈响应屏幕尺寸。

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

问题：

当窗口大小减小时，我希望整个圆圈的大小减小。我不知道该怎么做。

代码：

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>

标签： javascripthtmlcsscanvas

解决方案

监听窗口调整大小事件并重绘画布

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

注意可能您需要对函数进行去抖动draw以提高性能

推荐阅读