html canvas修改属性,canvas 的HTML属性

标签：

(一) width/height 默认值与单位

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

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

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

(二)属性与CSS权重问题

请试想下，这个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，

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

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中设置的宽度与高度吗？

let context=document.querySelector('canvas').getContext('2d');

context.fillStyle='red';

context.arc(150,75,75,0,2*Math.PI);

context.fill();

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

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

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

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

标签：

来源： https://www.cnblogs.com/xianrongbin/p/9699385.html