使用canvas的api时, 使用的都是绝对数值, 如:

方法传参是坐标位置，不带单位，如ctx.translate(10,10);

那么此时, 我就需要将rem或rpx 转换成 px;

首先, 获取设备宽度

h5: var clientWidth = document.documentElement.clientWidth;

小程序没有document对象, 所以要使用小程序自带的api获取设备宽度

var clientWidth = wx.getSystemInfoSync().windowWidth;
然后进行单位换算!
我以小程序为例
我们UI出的图是750, 以iphone6为标准;
所以 375/750 = clientWidth/x ;
x为转换后的数值;
直接按UI图尺寸换算成px再传入canvas的方法中即可 !

使用canvas时, 如何用相对单位(rem, rpx)来适配不同机型的更多相关文章

  1. 单位rem 触屏适配总结

    总结过的:定宽320 缩放适配手机屏幕 参考文章:web app变革之rem 先了解一下rem css3 中引入了新的长度单位,rem. 官方定义 font size of the root elem ...

  2. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

  3. 视口viewport与单位rem的本质

    结论: 视口viewport的设置是为了让字的显示在不同的屏幕下保持一致. 单位rem的使用是为了让页面中的布局元素的比例在不同的屏幕下显示的比例保持一致. 现象: 我们看电脑时候的网页的时候的字体大 ...

  4. CSS3新的字体尺寸单位rem

    CSS3引入新的字体尺寸单位 rem ,可以简单记忆为root rm. CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem.在W3C官网上 是这样描述rem的——“font size ...

  5. 在jQuery中使用canvas时遇到的问题

    正常的情况下一般在JavaScript中使用canvas,会用到如下代码: var canvas=document.getElementById("canvas"); var co ...

  6. css 相对单位rem详解

      CSS3新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. ...

  7. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  8. Android 尺寸单位转换和屏幕适配相关

    Android 尺寸单位转换和屏幕适配相关 各种尺寸单位的意义 dp: Density-independent Pixels 一个抽象的单元,基于屏幕的物理密度. (dp和dip的意义相同,所以不用区 ...

  9. rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题

    rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题 判断是特殊机型,做特殊处理. var u=navigator.userAgent; if($(window).width() ...

随机推荐

  1. js 弹窗并定时关闭

    1. $('input').click(function() { prompt('点击成功', 2000) }) function prompt(newName, time, fn) { var $d ...

  2. springBoot相关（一）

    2.0新特性: 编程语言: Java8+.Kotlin 底层框架:Spring Framwork 5.0.x 全新特性: web Flux web Flux: 函数编程:java 8 Lambda 响 ...

  3. Eclipse中 Run as --->Maven build 命令详解

    Maven Build  Goals: clean  清除编译,compile  编译,test  编译并测试,install 打包并发送到本地仓库,package 只是打成jar包,并不会发送到本地 ...

  4. 【leetcode】126. Word Ladder II

    题目如下: 解题思路:DFS或者BFS都行.本题的关键在于减少重复计算.我采用了两种方法:一是用字典dic_ladderlist记录每一个单词可以ladder的单词列表:另外是用dp数组记录从star ...

  5. 【锁】MySQL和Oracle行锁比较

    InnoDB INNODB表是索引组织的表,主键是聚集索引,非主键索引都包含主键信息. INNODB默认是行锁. INNODB行锁是通过给索引项加锁来实现的,即只有通过索引条件检索数据,InnoDB才 ...

  6. SimpleDateFormat线程不安全原因及解决方案

    一. 线程不安全验证: /** * SimpleDateFormat线程安全测试 * 〈功能详细描述〉 * * @author 17090889 * @see [相关类/方法](可选) * @sinc ...

  7. Python函数中*args和**kwargs来传递变长参数的用法

    参考自: http://www.jb51.net/article/78705.htm 单星号形式(*args)用来传递非命名键可变参数列表.双星号形式(**kwargs)用来传递键值可变参数列表. 1 ...

  8. spfa模板（洛谷3371）

    洛谷P3371 //spfa:求s到各点的最短路,可含负权边 #include <cstdio> using namespace std; ,max_m=,inf=; struct ety ...

  9. crontab不能正常执行的五种原因

    1 crond服务未启动 crontab不是Linux内核的功能,而是依赖一个crond服务,这个服务可以启动当然也可以停止.如果停止了就无法执行任何定时任务了,解决的方法是打开它: crond 或 ...

  10. 八. jenkins参数化构建 git分支

    使用git管理代码时往往会有多分支开发,这时部署通过修改配置不试用.可以通过参数化构建. 1.通过字符参数方式 新建一个maven项目,选择参数化构建过程-字符参数,如下: 源码管理中配置如下: 其它 ...