2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

canvas无法使用rem单位的解决方案

canvas移动apphtml5javascript作者:猿2048志愿者

我们在使用canvas时需要设置画布的大小,即设置canvas标签的width,height属性。

<canvas width="200px" height="200px"></canvas>

在移动端,画布的大小要根据屏幕的大小进行适配,我们一般采用rem结合媒体查询的方式。使用canvas时就遇到遇到一些问题:

<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/

如果有其他解决方案,欢迎讨论交流!如果文章对你有帮助,点下面的推荐鼓励下呗(๑>؂<๑)

本文来源于网络:查看 >
« 上一篇:HTML5 canvas drawImage() 方法记录
» 下一篇:H5全屏滑动
评论
点击刷新
评论
相关博文
×添加代码片段