帆布层和定位

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> 

克利宽度和高度被错误解析（ 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。

如果我添加位置：绝对，覆盖层可以工作，但它不在div边界内，see here。

Answer 1

您在style属性中插入HTML width和height属性，该属性应该包含css。如果你检查开发工具，你会看到相关的规则被触发。只需使用CSS来设计它们。更妙的是，将它们放置在<style/>标签或在外部样式表

不好：

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

好：

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

还是：只要关闭双引号，反正使用的属性（尽管css是更好的解决方案）