canvas无法使用rem单位的解决方案
来源:互联网 发布:万方数据库检索平台 编辑:程序博客网 时间:2024/04/29 06:52
我们在使用canvas时需要设置画布的大小,即设置canvas标签的width,height属性。
<canvas width="200px" height="200px"></canvas>
在移动端,画布的大小要根据屏幕的大小进行适配,我们一般采用rem
结合媒体查询
的方式。使用canvas时就遇到遇到一些问题:
canvas的width属性不支持
rem
单位(如果使用样式当然支持rem
,但注意canvas的width属性与style中的width是有区别的),如下
<canvas width="2.5rem" height="2.5rem"></canvas>
translate
方法传参是坐标位置,不带单位,如ctx.translate(10,10)
;
适配屏幕是必须的,但如何解决?用最原始的百分比布局就可以:
//获取屏幕的宽度var clientWidth = document.documentElement.clientWidth;//根据设计图中的canvas画布的占比进行设置var canvasWidth = Math.floor(clientWidth*200/720);canvas.setAttribute('width',canvasWidth+'px');canvas.setAttribute('height',canvasWidth+'px');//translate方法也可以直接传入像素点坐标
最后顺便放上写好的Demo:http://jsfiddle.net/0eLzthjv/
0 0
- canvas无法使用rem单位的解决方案
- rem单位的使用总结
- 前端rem单位的正确使用姿势
- em和rem 单位的使用
- 如何使用rem单位
- 如何使用rem单位
- 如何使用rem单位
- 单位REM的理解
- 如何使用新单位rem
- 如何使用rem字体单位
- 【干货】前端rem单位的正确使用姿势
- 微信小程序中单位rpx和rem的使用
- 移动端的rem单位
- canvas 单位问题 类似rem和rpx自适应手机屏幕宽度
- 单位rem
- 使用单位rem实现响应式布局
- 使用rem单位实现布局自适应
- 手机上rem大小单位的设置
- MyEclipse导入项目有红叉的各种情况及其解决办法
- IEEE 802.15.4协议完整中文版 - 5.1.1.2 - 5.1.1.4
- java使用https post发送json数据
- Hadoop - HDFS API 对文件进行操作
- Android 动画之属性动画ValueAnimator
- canvas无法使用rem单位的解决方案
- gitlab安装与配置
- Unity3D学习日记1
- Android控件晃动效果实现
- Java简单操作mysql数据库代码存档+处理中文乱码问题
- $.ajax()jquery中的ajax方法参数
- TextView伸缩效果
- 在Android Studio中进行单元测试和UI测试
- Android Studio关于SVN的相关配置简介