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

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

• canvas的width属性不支持rem单位(如果使用样式当然支持rem，但注意)，如下

• 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：

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