使画布与父对象一样宽和一样高
我想制作一个矩形画布来模拟进度条,但是当我将画布的宽度和高度设置为100%时,它实际上并没有像父对象一样高和宽
甚至可以制作非正方形的画布吗?我不想对画布的高度和宽度进行硬编码,因为在更大或更小的屏幕(包括移动设备)上查看时,画布应该动态更改
回答:
您的示例有几个问题:
- A
<div>
没有height
或width
属性。您需要通过CSS进行设置。 - 即使div的大小正确,它也会使用default
position:static
,这意味着它不是任何子级的定位父级。如果希望画布与div大小相同,则必须将div设置为position:relative
(或absolute
或fixed
)。 - “ 画布”上的
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;
}
以上是 使画布与父对象一样宽和一样高 的全部内容, 来源链接: utcz.com/qa/400171.html