Html - 使画布与父级一样宽和一样高

[英] make canvas as wide and as high as parent

发布于04月19日 • html

我想做一个矩形画布来模拟进度条但似乎当我将画布的宽度和高度设置为100%时，它实际上并没有像父画布那样高和宽

please see example below
http://jsfiddle.net/PQS3A/

有没有可能做非正方形的帆布呢？我不想硬编码画布的高度和宽度，因为当在更大或更小的屏幕(包括移动设备)中查看时，它应该动态变化

javascript css html canvas

http://jsfiddle.net/PQS3A/7/

您的示例有几个问题:

<div>没有height或width属性.您需要通过CSS设置它们.

即使div的大小正确，它也使用默认的position:static，这意味着它不是任何子级的定位父级.如果希望画布的大小与div相同，则必须将div设置为position:relative(或absolute或fixed).

画布上的width和height属性指定要绘制的数据的像素数(如图像中的实际像素)，并且与画布的display size分开.这些属性必须设置为整数.

上面链接的示例使用CSS来设置div大小并使其成为定位的父级.它创建一个JS函数(如下所示)以将画布设置为与其定位的父画布相同的display大小，然后调整内部的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; }

如何在react 应用程序中从服务器响应创建 childElement

如何将图片附加到另一张图片？

如何从 div 内的另一个页面显示不完整的 HTML

绝对锚标签与具有绝对跨度的锚标签

编写在行之间具有多个标题的 HTML 表格的最佳方法是什么？

从网站获取用于抓取地址的相关标签

当文本比 React 中的输入本身长时，如何以编程方式显示 HTML 输入元素的最左侧内容

如何随着material 徽章的索引增加而更改 colored颜色，例如(0,1,2,3,..etc)在Angular

更改复选框的 colored颜色

::selection在换行时无法正常工作

为什么 div 可以正确拉伸，但不能正确拉伸图像？

使用 CSS 自动调整溢出(Overflowing)文本的大小