使画布与父对象一样宽和一样高

您的示例有几个问题：

1. A

   <div>

   没有

   height

   或

   width

   属性。您需要通过CSS进行设置。
2. 即使div的大小正确，它也会使用default

   position:static

   ，这意味着它不是任何子级的定位父级。如果希望画布与div大小相同，则必须将div设置为

   position:relative

   （或

   absolute

   或

   fixed

   ）。
3. “ 画布”上的

   width

   和

   height

   属性指定要绘制的数据像素数（如图像中的实际像素），并且与画布的 显示大小 分开。这些属性必须设置为整数。

上面链接的示例使用CSS设置div大小并使其成为定位父对象。它创建了一个JS函数（如下所示），以将画布设置为与其放置的父对象相同的 _显示_尺寸，然后调整内部

width

height

var canvas = document.querySelector('canvas');fitToContainer(canvas);function fitToContainer(canvas){  // Make it visually fill the positioned parent  canvas.style.width ='100%';  canvas.style.height='100%';  // ...then set the internal size to match  canvas.width  = canvas.offsetWidth;  canvas.height = canvas.offsetHeight;}