下圖中“老王考到駕照後”這幾個字是畫在Canvas上的，與在PS中打入的字非常接近，毫無違和感。
前面一段時間也在研讀JavaScript設計模式相關的知識，這次正好小小的實踐一下，但對設計模式的了解還不是很深。
總共就兩張頁面，第一張是選擇性别，輸入名字，第二張頁面是合成文字，并展示出來。
雖然頁面很簡單，但在做這個項目的時候，涉及到了很多方面，自定義字型、CSS3動畫、Canvas、CSS3選擇器、本地緩存、建構工具等。
下圖是工程檔案總覽：
有了建構工具後，就能友善的壓縮圖檔、壓縮CSS、壓縮JS、編譯Sass檔案、編譯Jade檔案、搭建本地伺服器等。
1）Jade
通過使用Jade，可以将html中通用的抽象出來，還可以使用循環、條件、繼承等特性，減少代碼，代碼也更可讀。
Jade代碼如下，下面是一個模版layout中的代碼，其他頁面可以繼承他，這樣很多通用的代碼就不用再寫了。
2）flexible.js
在腳本中會做兩個操作，
一個是放大，如果是IOS系統，那麼會根據目前的裝置像素比來做頁面的放大操作，如果是Android就還是預設的。
例如Iphone6中裝置像素比是2，那麼就設定為0.5，也就是1/2。
另外一個就是計算rem的基準值，擷取到“document.documentElement”的寬度，再除以10，作為一個基準值。
1）Sass
Sass 有助于保持大型樣式表結構良好，同時也讓你能夠快速開始小型項目。
通過Sass，可以将CSS子產品化、代碼更清晰、并且能将通用的代碼抽象出來複用。
移動端開發，由于螢幕尺寸很多，是以用彈性布局，會比較友善，專門封裝了一段操作彈性布局各個屬性的代碼“grid”。
2）自定義字型圖示
上圖中的“icon”，封裝了自定義字型的CSS代碼。
自定義字型圖示相對于圖檔，有可控制大小、顔色、對齊更簡單等優勢。
并且現在移動端都能支援，适當的使用自定義字型可以提升頁面性能。
我将用到的圖示放到了一個項目中，以便重複使用。
3）CSS3
還經常會用到僞對象選擇符“::after”或“::before”，有了這兩個就相當于多了兩個标簽。
上圖中的長按儲存這張圖檔就設定在僞對象中。
1）通用子產品
JS與CSS一樣，也整理了一些通用的子產品，在實際項目中，直接引用即可。
上面的子產品一個封裝了緩存，一個封裝了平時需要操作DOM的相關方法。
2）指令模式封裝的Canvas
這裡将canvas畫文本與合成圖檔封裝了起來：
2.canvas中的drawImage就是用來嵌入圖檔的，設定好起始坐标和圖檔大小後就能将圖檔展示在一起。
3.上面的操作就是：在一張預先寫好文案的圖檔上寫上動态輸入的名字，再配上自定義文案和二維碼圖檔。
源碼位址：
<a href="https://github.com/pwstrick/road" target="_blank">https://github.com/pwstrick/road</a>
本文轉自 咖啡機（K.F.J） 部落格園部落格，原文連結： http://www.cnblogs.com/strick/p/6158320.html，如需轉載請自行聯系原作者