Javascript 动态更改画布大小

我想在画布上绘制一些东西，并根据其内容调整其大小，而周围的div负责滚动画布内容

到目前为止我所拥有的。非常基本的HTML代码如下所示：

函数init（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（'2d'）；
var max=5；
宽度=30；
高度=30；
对于（i=0；i

#包装器{
高度：100px；
宽度：100px；
溢出：滚动；
}
#画布{}

---

此处讨论动态设置画布大小：

可以使用CSS更改画布的显示大小，但是如果 执行此操作时，将在渲染期间缩放图像以适合样式大小， 这会使最终的图形渲染最终失真

最好通过设置宽度来指定画布尺寸 和直接在元素上的高度属性 直接在HTML中或使用JavaScript

您将在解决方案中看到，我在画布上绘制之前设置了大小。如果画布在绘制形状后调整大小，则图形将丢失。原因是画布的像素尺寸已更改，并且上下文丢失（画布已重置）。您也可以在这篇SO帖子上看到：

函数init（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（'2d'）；
var wrapper=canvas.parentNode；
canvas.setAttribute（“宽度”，window.getComputedStyle（wrapper.width）；
canvas.setAttribute（“height”，window.getComputedStyle（wrapper.height）；
var max=5；
宽度=30；
高度=30；
setAttribute（“宽度”，（最大）*rectWidth+“px”）；
setAttribute（“高度”，（最大）*rectHeight+“px”）；
对于（i=0；i

#包装器{
高度：100px；
宽度：100px；
溢出：滚动；
}
#帆布{
边框：1px实心；
}

请将所有这些放在一个代码段中？在某些浏览器中，必须将画布元素的宽度和高度属性值设置为与宽度和高度属性相同的值。尝试设置两者-看看会发生什么。@RandyCasburn这样的片段？当我添加

canvas.width=150时，我做什么并不重要在JS中画布消失。JS是唯一一个设置大小有意义的地方，因为它是动态的，所以无法在CSS或HTML中设置。