活動頁需要合成一張海報，所以要用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插進去
