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

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

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

推荐答案

以下是解决问题的有效示例:

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

您的示例有几个问题:

  1. <div>没有heightwidth属性.您需要通过CSS设置它们.
  2. 即使div的大小正确,它也使用默认的position:static,这意味着它不是任何子级的定位父级.如果希望画布的大小与div相同,则必须将div设置为position:relative(或absolutefixed).
  3. 画布上的widthheight属性指定要绘制的数据的像素数(如图像中的实际像素),并且与画布的display size分开.这些属性必须设置为整数.

上面链接的示例使用CSS来设置div大小并使其成为定位的父级.它创建一个JS函数(如下所示)以将画布设置为与其定位的父画布相同的display大小,然后调整内部的widthheight属性,使其具有与其显示相同的像素数.

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;
}

Html相关问答推荐

我可以使用 Markdown 在 hugo 帖子内容中创建带有 'target="_blank"' 的链接吗?

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

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

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

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

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

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

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

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

更改复选框的 colored颜色

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

为什么 div 可以正确拉伸,但不能正确拉伸图像?

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

abel(input type="radio") 不在中心

为什么连宽度都合适?

移动设备上的表单字段缩小得太小

如何删除/忽略:touch 设备上的悬停 CSS 样式

如何从对象 URL 获取文件或 blob?

如何在 Angular 4+ 中使用 html 标签呈现字符串?

Favicon Standard - 2022 - svg、ico、png 和尺寸?