canvas里设置width和css里设置width和js里设置width的区别

本文解析了canvas元素的width和style.width属性的区别,强调了直接使用vh和vw单位设置canvas尺寸的无效性,并提出了解决方案,即通过CSS设置vw单位的width,在JS中获取并赋值给height实现自适应。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 canvas.width 和 它的style.width是不一样的:

        canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高,

                    行间样式里如果你用vh和vw设置宽高,不好意思,不可以,统统按照px计算,

                    css里可以用vw,vh。但是,请记住,这里设置的是style.属性;

                    js里用带有单位的字符串比如vw和vh还有px,设置width和height,还是不好意思,不好使,

                            这样就不好使!!!

 

                              (style属性是表现在页面上的样式,不是canvas的本身的属性。一定要注意。随意设置style的宽高直接导致的结果就是画画变形变形变形)

     好了,那么怎么做比较好?

    我的做法是,要想自适应屏幕的大小。  可以在css里设置width(就是style.width )为vw单位的宽度;在js里获取它的width(canvas的属性)  然后赋值给 height。

                              

转载于:https://www.cnblogs.com/dangdanghepingping/p/10207961.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值