之前學PHP購物網站的時候，曾經學過如何產生驗證碼
雖然都忘記光光了
但是想試試看在前端，只用JavaScript來製作簡易的驗證碼
以下5個版本參考了3個網路範例跟2個教學網站
但都做了相當程度的修改，因為有的範例是沒辦法執行…
整體的流程是透過迴圈來隨機取得陣列格式的預設顏色組合
將文字寫入區塊例如<p>或者<canvas>之中
不同的版本有不同的嘗試
需要注意的部分都註記在CodePen裡了
版本1
使用Js的canvas來繪製底圖跟干擾點
See the Pen 使用canvas及js簡單生成驗證碼3 by 莊幸諺 (@trico109748007) on CodePen.
版本2
單純用JavaScript跟CSS來產生底圖與修改配色與字形樣式，不同於canvas輸出在頁面的是圖檔格式
這個是直接將文字輸出
See the Pen 使用_js簡單生成驗證碼 by 莊幸諺 (@trico109748007) on CodePen.
版本3
在版本2的基礎進行修改，並且設計成數學運算的問題回答
設計原理是透過兩組數值意義一樣的陣列搭配
中文數字用來顯示
阿拉伯數字則是用來在背景裡進行加、減、乘的運算
(沒有”除”的原因是可能會無法整除，也就是有小數點)
由於運算符號是以字串形式儲存在陣列之中
所以輸出的數學運算式會被視為字串型態
因此再透過eval()強制運算字串形式的數學運算式
最後跟使用者輸入的資料(要轉成數值型態)進行比較
See the Pen 使用_js簡單生成驗證碼2 by 莊幸諺 (@trico109748007) on CodePen.
版本4
這個版本的底圖是利用canvas的drawImage()功能，擷取作為干擾圖式的特定圖片的某個範圍作為底圖
See the Pen 使用canvas及js簡單生成驗證碼4 by 莊幸諺 (@trico109748007) on CodePen.
版本5
版本3跟版本4的綜合應用
See the Pen 使用canvas及js簡單生成驗證碼5 by 莊幸諺 (@trico109748007) on CodePen.