canvas没法运用rem单元的解决方案

2024年2月10日 361次阅读 来源: 云贤力

我们在运用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/

假如有其他处理方案，迎接议论交换！假如文章对你有协助，点下面的引荐勉励下呗(๑>؂<๑）

    原文作者：云贤力
    原文地址: https://segmentfault.com/a/1190000003502824
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞