背景
开发手机端微信H5场景应用，需要用到图片合成技术，开始了研究createjs之旅。
本文主要是分享在开发中遇到的问题几个小问题，适合初学者，如果你是大佬，可以帮我检查下有没有错，哈哈哈
介绍
EaselJS是createjs的一个模块。我主要用它绘图，写字，最后生成图片。
A JavaScript library that makes working with the HTML5 Canvas element easy.
一个使HTML5画布元素轻松工作的JavaScript库。
引入 EaselJS
方式一
方式二
import 'yuki-createjs/lib/easeljs-0.8.2.combined.js' //npm install yuki-createjs使用vue开发的时候，使用官方的npm install createjs 遇到了问题，引入的时候比较麻烦，找到了这个传送门直接引入，不用配置，灰常好用。
开发问题
问题一:canvas如何全屏?
方案一
一开始查到的解决方案是js设置宽度为窗口的文档显示区的宽度。
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;以iphone5为例，window.innerWidth为320，canvas宽度为320，没什么问题（图片100%后面说）。
但是发现保存的图片宽度是320px，有点模糊，对图片大小有要求的就有点蛋疼了。这个方案就被我放弃了。演示代码：项目lesson1文件夹
方案二
canvas设置你想要的图片大小的宽度，比如说我想要保存750*1200的图片，给canvas加个width="750" height="1200",然后给他加个style="width:100%",然后他也全屏了，并且是你想呀的尺寸。
如果你只想要width="750"高度自适应要怎么做呢？
在获取图片之后设置canvas的高度
canvas.height = canvas.width *image.height/image.width ;解决了画布的问题后我们来说图片撑满的问题。演示代码在项目lesson2文件夹
问题二:canvas绘制图片如何撑满?
添加关键的代码，设置图片的缩放比例就ok了。
bitmap.scaleX = canvas.width / image.width;
bitmap.scaleY = canvas.height / image.height;很简单完美的呈现出来了，演示代码在项目lesson3文件夹
问题三:如何使用container？
var rankData = [{
rank: '第一:',
name: '花花'
}, {
rank: '第二:',
name: '瓜瓜'
}]想要将上面的数据拼接循环显示在图片中间位置，想要拼接组合起来的文字做居中，我查到的方法是放进container里（大家如果有更好的方法可以分享一下）。
//添加名次
var myContainer = new createjs.Container();
var rankData = [{
rank: '第一:',
name: '花花花花花花花花'
}, {
rank: '第二二:',
name: '瓜瓜'
}, {
rank: '第三第三:',
name: '贝贝'
}]
var start = 0; // 起始位置
var distance = 50; // 间距
rankData.forEach(function (el) {
let text = new createjs.Text(el.rank, "bold 24px Arial", "#ff0018");
let text1 = new createjs.Text(el.name, "bold 24px Arial", "#282523");
let w = text.getBounds().width; //获取字体宽度
let w1 = text1.getBounds().width; //字体宽度
text.x = start; //设置rank位置
text1.x = start + w; //设置name位置0+text宽度
start += w + w1 + distance; //写完第一个后，设置start为字体本身宽度+距离
myContainer.addChild(text);//添加到容器里
myContainer.addChild(text1);//添加到容器里
}, this);
stage.addChild(myContainer);
//设置位置
myContainer.x = (canvas.width - start + distance) / 2; // 横向居中,总长度减去拼接字体长度/2
myContainer.y = canvas.height / 2; // 纵向居中
stage.update();//更新视图这样通过居中container就可以实现拼接字符串的居中了。
项目lesson4文件夹
结束
虽然很简单，但是如果你觉得有用你就点个赞，github送我个星星吧，哈哈。
愿我的世界挂满你送的小星星（づ￣3￣）づ╭❤～