Javascript 如何在视口上调整画布宽度

我有一个画布演示，产生了一些圆圈。我似乎不知道如何让它在设置

canvas.width

或

canvas.style.width

（这里有什么区别？）时响应，在窗口上使用

window.innerWidth

调整大小

代码运行良好，但在较小的视口中会奇怪地重新渲染。我尝试在javascript文件的底部添加这段代码，但它破坏了动画

  // ADDING THESE LINES PREVENTS ANIMATION FROM RUNNING
  if (window.innerWidth < 1000) {
    canvas.width = window.innerWidth;
   } else {
     canvas.width = 1000;
   }

画布.width
和
画布.style.width
之间的区别在于
画布.width
指定画布的实际大小（以像素为单位），而
画布.style.width
将画布拉伸或压缩到指定的宽度。这将画布宽度设置为300px：

canvas.width = 300;

这也会将画布宽度设置为300px，但会将其拉伸到600px：

canvas.width = 300;
canvas.style.width = "600px";

使用
canvas.width
是更好的做法


要运行动画，必须首先固定画布宽度。将调整画布大小的代码放在
animate（）
函数的开头可以解决以下问题：


var canvas=document.querySelector（“canvas”）；
画布宽度=1000；
画布高度=100；
var c=canvas.getContext（“2d”）；
//构造函数（对象蓝图）
功能圆（x、y、dx、dy、半径、计数器）{
这个.x=x；
这个。y=y；
this.dx=dx；
this.dy=dy；
这个半径=半径；
this.counter=计数器；
this.draw=函数（）{
c、 beginPath（）；
c、 圆弧（this.x，this.y，this.radius，0，Math.PI*2，false）；
c、 strokeStyle=“白色”；
c、 笔划（）；
c、 fillStyle=“白色”；
c、 填充（）；
};
this.update=函数（）{
if（this.y+this.radius>canvas.height）{
这个。y=0；
}
this.x+=this.dx；
this.y+=this.dy；
这个.draw（）；
};
}
//初始化数组以存储雪对象
var circleArray=[]；
//使用构造函数初始化对象
对于（变量i=0；i<50；i++）{
var radius=1+Math.random（）*5；
var x=Math.random（）*canvas.width；
var y=0-Math.random（）*50；//从顶部开始，在屏幕外渲染一些圆
var dx=（数学随机数（）-0.5）*2；
var dy=0.5+Math.random（）*0.5；//使用重力
推（新的圆（x，y，dx，dy，半径，0））；
}
函数animate（）{
如果（窗内宽度<1000）{
canvas.width=window.innerWidth；
}否则{
画布宽度=1000；
}
requestAnimationFrame（动画）；//循环运行
c、 clearRect（0，0，innerWidth，innerHeight）；//删除以前绘制的内容
对于（var i=0；i
正文{
背景颜色：灰色；
显示器：flex；
证明内容：中心；
}
.包装纸{
位置：相对位置；
宽度：1000px；
高度：110px；
最小高度：110px；
边际上限：50vh；
}
.wrapper>*{
宽度：1000px；
位置：绝对位置；
}
帆布{
位置：绝对位置；
}
img{
宽度：100%；
高度：110px；
}

相关：