(一) 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属性来进行定位的。