canvas合成海报所遇问题及解决方案总结

最近做了一个用canvas合成海报图片的移动端项目，由于一点canvas基础都没有，所以去网上搜了一位前辈的demo，但是开发过程中遇到了很多问题，现将所遇问题及解决方法总结如下：

 

1、移动端canvas项目适配全屏问题

　　问题描述：由于canvas的width和height只能设置px值，不支持rem单位，所以想在移动设备屏幕分辨率繁杂的情况下达到canvas铺满全屏的效果很困难。

　　解决方法：通过js获取到手机屏幕的clientWidth值，赋给canvas，以此来达到适配全屏的效果；

 

var clientWidth = document.documentElement.clientWidth;
var canvasWidth = Math.floor(clientWidth);
var canvasHeight = Math.floor(clientWidth*(1334/750));
$("#main").css('width',canvasWidth+'px');
$("#main").css('height',canvasHeight+'px');