司慶活動總結

主要功能：根據用戶所選答案生成對應的圖片
選用框架：html2canvas
選用理由：

1. 時間急
2. api簡單
3. github上星比較多，那說明使用的人比較多，遇到的問題應該在issue上能找到解決方案😁（後面打臉很舒服☺️）

遇到問題及解決：
階段1
初始版本的時候，策劃測試經過，可是UI文案須要修改

階段2
更新UI文案以後，測試的安卓機手機都沒問題，但發現測試的全部ios生成的圖片都空白了。（上面那個按鈕不是生成的）
分析問題：看了報錯的緣由，定位到對應的源碼，發現其中有一張圖片的寬高讀不出來，直接致使html2canvas報錯了。檢查了一下css, 我也沒用它不支持的css屬性啊。去issue看有沒有人遇到這個問題，沒有😭
問題修復：出現問題以前沒改過js代碼，只是更換了的圖片和css的樣式寫法。因而我將css樣式寫法改回上一次的
修復結果：部分ios能夠生成圖片了。但還有個別版本：ios11.2 ios12仍是一樣一片空白。

階段3
針對ios個別版本進行修復，問題仍然是讀不出某張圖片的信息
分析問題：獲取不到某張圖片的寬高，首先我先排除是圖片沒有load出來的緣由，由於一開始就作了預加載，並且在結果頁裏圖片都已經顯現出來了。那會不會是由於雪碧圖的緣由呢，由於每次讀不出來的那張圖片都是雪碧圖（它的源碼對背景圖的解析方式看不懂。。。）
問題修復：我把要生成圖片那頁的背景圖（包括雪碧圖）都拆改爲img
修復結果：哈，發現成功了！！並且發現把背景圖改爲img以後，圖片馬上清晰了好多！可是高興的太早了...當玩多幾回的時候發現，頁面好像有點奇怪哦。圖一是正確生成的圖，圖2、三是由問題的。

階段4
仍是針對ios個別版本，此次問題變成時不時正常、時不時文字錯位或消失
分析問題：此次沒有任何的報錯，就是純粹的bug！掙扎了半天決定放棄該插件了😭，一直耗着又徹底沒頭緒解決問題也是浪費時間。
問題修復：因而轉用createjs，它就是對canvas進行了一層封裝，api還算簡單。這裏關鍵點主要有兩個：

1. 圖片的位置問題。爲了兼容各個屏幕大小的手機，css我一直用的是rem，目前來講效果還算能夠，比px少一點坑。全部我決定js這裏也是用rem做爲單位。ui是以750作爲尺寸的，爲了方便計算，我就取了7.5這個基數，就是一屏width=7.5rem。那js計算每1rem就等於：var rem = (widthOfWinow / 7.5)
2. canvas模糊的問題。這跟手機像素比有關，它就是canvas的實際大小和渲染大小比。因此首先須要計算出像素比，將canvas.width和canvas.height放大到canvas.style.width/height的像素比倍數。固然，canvas裏其餘元素的位置也要放大到相應的倍數。

最後
終於測試經過。