html canvas修改属性,canvas 的HTML属性 |
您所在的位置:网站首页 › canvas标签设置dpi › 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 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |