在移动端开发中，canvas的width属性不支持rem单位，导致尺寸适配问题。为解决此问题，可以使用JavaScript根据屏幕宽度动态设置canvas的width和height属性，实现基于rem的适配。通过设置canvas.style.width和canvas.style.height为百分比，然后计算其真实像素值，赋值给canvas.width和canvas.height。在实际应用中，可结合设备像素比进行精确调整。参考Demo: http://jsfiddle.net/0eLzthjv/
我们在使用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<
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
扫一扫
676
