Question

我很难弄清楚如何为下面的画布设置合适的尺寸

<div id="canvasesdiv" style="height: 100%; width: 100%; display: table-cell;  position: relative; width:578px; height:415.5px">
  <canvas id="c1"      style="z-index: 1; position:absolute; left: 80px; width="680" height="435"></canvas>   
  <canvas id="c2"      style="z-index: 2; position:absolute; left: 80px; width="680" height="435"></canvas>
  <canvas id="c3"      style="z-index: 3; position:absolute; left: 80px; width="680" height="435"></canvas>
  <canvas id="c4"      style="z-index: 4; position:absolute; left: 80px; width="680" height="435"></canvas>
  <canvas id="c5"      style="z-index: 5; position:absolute; left: 80px; width="680" height="435"></canvas>

错误地解析了Cleary的宽度和高度（html期望：和px中的值），但不知何故，画布以其完整尺寸绘制。相反，如果我使用类似的东西：

  <canvas id="c1"     style="z-index: 1; position:absolute; left: 80px; "></canvas>   
  <canvas id="c2"     style="z-index: 2; position:absolute; left: 80px; "></canvas>
  <canvas id="c3"     style="z-index: 3; position:absolute; left: 80px; "></canvas>
  <canvas id="c4"     style="z-index: 4; position:absolute; left: 80px; "></canvas>
  <canvas id="c5"     style="z-index: 5; position:absolute; left: 80px; "></canvas>

或

... width: 500px; height: 500px;"

无论如何，画布都会被裁剪为300x150（默认为镀铬）。

问题是位置：绝对是必须的才能拥有图层。如何定义一个维度而不破坏画布质量并使其保持在给定的边界内呢？

看到这个例子，你能解决它，以便位置是绝对的，但大小是你想要的和居中的吗？ See here

如果我添加position：absolute，则叠加层可以工作，但它不在div范围内，see here。

Answer 1

您要在width属性中插入HTML height和style属性，这些属性应保留css。如果您检查开发工具，您将看到相关规则被打破。只需使用CSS来设置它们的样式。更好的是，将它们放在<style/>标签或外部样式表

中

不好：

<canvas style="... width="680" height="435"></canvas>

好：

<canvas style="... width: 680px; height: 435px;"></canvas>

或者：只需关闭双引号，然后使用属性（尽管css是更好的解决方案）

画布图层和定位

1 个答案: