活动页需要合成一张海报，所以要用canvas，一开始我以为只是简单合成，后来我发现我错了。
首先我没接触过canvas的任何应用。所以我先上网找了一下教程。。
好像教程都挺简单的
1 var canvas=document.getElementById("myCanvas");//获取cnavas那个dom 2 var ctx=canvas.getContext("2d");//貌似是定义为2D 3 var bg = document.getElementById("scream");//获取id为img的dom
4 ctx.drawImage(bg,0,0,750,1159);//把图片插入canvas的方法
这样就可以搞到图片了 然后用drawImage()方法就可以了。
看完教程我觉得，这些玩意Low爆了，简单的一逼~
但是我错了，错的很离谱。。
现在存在的两个问题
1.图片加载问题。
2.画图的层级问题。
第一个问题图片加载问题，我看到网上很多人用.onload()；并不是说这个方法不好，我个人觉得用complete会方便一点。（因为我这边要把多个图片合成一个海报，所以我就定义了一个开关判断这些图片是否都加载了才执行下一步）注：complete的判断依据是图片是否出现过，然后返回的是true or false这里的出现过与display:none之类的css是无关的。完全是用来判断这个图片是否已经存在网页中，能保证图片完全加载过，这样就不会使canvas画空了。
第二个问题 图片的层级问题，这个问题只要按顺序写就可以了，最后写的层级最高，所以第一个写的就是背景图了。就是辣么简单！
画完了canvas，就要转换成img图片了，是不是感觉soeasy?合成图片的时候，就出现了跨域问题！！没错就是跨域了，这些图片都是一个页面上的，为什么会跨域呢？因为他们的文件源不一样，所以跨域了！
那不是很悲剧吗？我的图片有来自本地 （背景图）有来自七牛 有来自其他外链的，那可怎么办啊？作为一个有尊严的前端，怎么可以向后端屈服？我们要自强不息。
这个是忘了是啥时候的截图了。
然后我找到了一个属性crossOrigin="anonymous"，据说这个可以解决跨域问题，然后我就加上了
<img id="scream" src="" crossOrigin="anonymous" alt="The Scream" width="220"><!-- 背景图-->
好像解决了跨域问题。然后我就高高兴兴的拿给产品看了，但是产品的手机居然还跨域了！！（吐槽一波，测试机的肾5S都没问题，就他的手机出现了跨域问题。mdzz）Cross-origin image load denied by Cross-Origin Resource Sharing policy.（来自产品手机的报错）。这时候没办法，然后我又想了一下，如果全部转换成Base64会不会解决呢？
jset do IT，我就去找后端，让他铺模板的时候，把图片地址换成base64，然鹅其他手机依旧正常，产品的手机依旧有问题。
这时候我只能跪着去找后端了，把所有的图片都转换成同源了，后端dalao抚摸着我的头，轻轻的说了一句，“好的”。
最后今天的所有问题都解决了！对了 好像忘了说转换成图片用什么方法了。
$('#img').attr('src',canvas.toDataURL());//canvas.toDataURL()就是把图片转换成base64 然后用JQ的attr插进去
