html5中的canvas fillRect属性设置 为什么必须要height和width内联在canvas标签内

Question

今天学canvas 的fillRect属性的时候 自己怎么调都不对，后来发现必须把height和width内联在canvas标签内。想问问这是为什么，是什么原因导致的。

无法让rillRect数值正确的设置方式

第一种

<canvas id="mycanvas" style="height:500px; width:500px;"></canvas>

第二种

<style>

#mycanvas{height:500px; width:500px;}

</style>

<canvas id="mycanvas"></canvas>

必须是内联才可以 为什么那 网上也百度了一圈 没看到有解释的。

<canvas id="mycanvas" height="500px" width="500px"></canvas>

Answer 1

<canvas>有自己的默认宽高300px*150px，而且在<canvas>中定义width、height跟在style中定义width和height是有所区别的，<canvas>标签的width和height是绘画区域实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是<canvas>在浏览器中被渲染的高度和宽度。如果<canvas>中没有直接定义width和height没或值不正确，就被设置成默认值{width:300px，height:150px}。所以，即使你在style中设置了canvas {width: 200px; height: 200px;}，此时你输出canvas.height 值依旧为150，canvas.width值依旧为300.这和一般标签你不设就就为undefined不同的。

Answer 2

我不懂html5 按照这个特点来看，貌似是一种规则吧，或是你设置方式有问题？在 换一种提问方式去百度搜索吧