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

IntMain 发布于2019-08-21 10:39 / 3446人阅读

摘要：我们在使用时需要设置画布的大小，即设置标签的，属性。在移动端，画布的大小要根据屏幕的大小进行适配，我们一般采用结合媒体查询的方式。

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

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

canvas的width属性不支持rem单位(如果使用样式当然支持rem，但注意canvas的width属性与style中的width是有区别的)，如下

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/

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

GPU云服务器云服务器应用的是rem单位 rem单位使用canvas画图无法访问您试图使用的功能所在的网络位置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85940.html

【css】常见问题

摘要：将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的属性设为，设置属性和是没有用的。这个属性值融合了和的特性，即是它既是内联元素，又可以设置和。 CSS 中 inline 元素可以设置 padding 和 margin 吗？行内元素设置width,height无效。但是设置margin和padding是有效的。行内非替换元素的外边距不会改变一个...

renweihub 2019-08-29 16:25 评论0 收藏0
移动端rem自适应布局(切图)

摘要：用做自适应单位也是一种流行的做法简介本篇适用于初次使用为单位切图而无从下手的童鞋。核心是根据屏幕动态改变根元素字体大小，以达到适配各种屏幕。不过对于快速做手机端切图很有帮助。 1.文章很久没更新，里面的东西可能并不适用现在的大环境，配套代码太老旧也只是个参考，不要直接用到生产上。 2.用vw做自适应单位也是一种流行的做法简介：本篇适用于初次使用rem为单位切图而无从下手的童鞋。核心...

levius 2019-08-29 11:28 评论0 收藏0
移动端rem自适应布局(切图)

摘要：用做自适应单位也是一种流行的做法简介本篇适用于初次使用为单位切图而无从下手的童鞋。核心是根据屏幕动态改变根元素字体大小，以达到适配各种屏幕。不过对于快速做手机端切图很有帮助。 1.文章很久没更新，里面的东西可能并不适用现在的大环境，配套代码太老旧也只是个参考，不要直接用到生产上。 2.用vw做自适应单位也是一种流行的做法简介：本篇适用于初次使用rem为单位切图而无从下手的童鞋。核心...

J4ck_Chan 2019-08-22 10:41 评论0 收藏0