canvas 的HTML属性

（一） width/height 默认值与单位　　

　　Canvas  标签只有两个属性—— width\height,作为一种替换元素，它默认大小为300×150像素。

　　canvas的单位只能是是px，值只能是整数。如果你设置为其他单位或者不设置，在渲染时，依旧按照像素单位显示。

　　如果数值设置称负数，或者 不设置，则按照 300×150像素显示（前提是 没有设置css，否则会有一些神奇的现象出现）。

　　

（二）属性与CSS权重问题

 <canvas style="background-color: #039be5; width: 300px" width="100px" ></canvas>

　　请试想下，这个canvas表现出 的宽度，高度是多少？

　　宽度是300px,因此，css的权重是  >   HTML 属性权重。

　　渲染出的高度却不是默认150px，如下图所示：

　

　　渲染出的高度是450px,这是为什么呢？

　　MDN上有句话： 绘制时图像会伸缩以适应它的框架尺寸 。

　　也就是说：  这里会按照等比例缩放：  即 （300【css宽度】/100【width宽度】）*150（height默认高度） = 450 px （渲染高度） 。　　

　　canvas的等比特性是强制的，有时候就会造成绘制的图形会发生扭曲。

　　如下，我即设置样式中的 width与height，又单独设置了 HTML属性中的width，但是 300/100=3，而300/150=2，

　　所里两者比例不一致，我绘制的圆，便会出现扭曲。 因此，实际开发中，不要两者都设置。

 <canvas style="background-color: #039be5; width: 300px; height: 300px;" width="100px" ></canvas>

 let context=document.querySelector('canvas').getContext('2d');
   context.fillStyle='red';
   context.arc(60,65,35,0,2*Math.PI);
   context.fill();

　　（三） Css 中width/height 与 HTML属性 widht/height 关系

　             试想下，当我们在css中设置了属性，并未设置 HTML属性时， 绘制图像时，它的坐标位置，尺寸大小是相对 我们在css中设置的宽度与高度吗？

 <canvas style="background-color: #039be5; height: 300px;" ></canvas>
<script type="text/javascript">
   let context=document.querySelector('canvas').getContext('2d');
   context.fillStyle='red';
   context.arc(150,75,75,0,2*Math.PI);
   context.fill();
</script>

　如上，我们设置一个高度为300px（宽度渲染为600px)的画布，然后在距离左顶点 150px,75px（也是圆心所在标记） 处绘制了一个圆，这个圆会居中吗？　

　 如果按照真实的高度300px来计算，距离上边距75px显然是不可能居中的；合理的解释是，是按照默认的HTML height属性150px来进行了定位。

　　

　　如果只设置HTML属性，同样的JS绘制，效果图如下。

 <canvas style="background-color: #039be5; " height="300px" width="600px"></canvas>

   因此，使用Canvas API进行图像绘制时，其坐标位置，尺寸大小都是按照 HTML属性来进行定位的。