寫之前還是需要給不懂的朋友複製貼上一些API的內容

canvas 元素用於在網頁上繪製圖形。

什麼是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。

畫布是一個矩形區域，您可以控制其每一畫素。

canvas 擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。

建立 Canvas 元素

向 HTML5 頁面新增 canvas 元素。

規定元素的 id、寬度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

通過 JavaScript 來繪製

canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 來尋找 canvas 元素：

var c=document.getElementById("myCanvas");

然後，建立 context 物件：

var cxt=c.getContext("2d"); 

getContext("2d") 物件是內建的 HTML5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。

上面介紹的也差不多了，看不太懂的小夥伴 可以去網上看看詳細的教程，這方面的資源很多！

下面上原始碼來釋放一下自己的小心情！

第一步：建立 Canvas 元素 

<canvasid="canvas"width="120"height="30"style="cursor: pointer;"></canvas>

第二步：建立自己的畫布

var canvas = document.querySelector('#canvas');var ctx = canvas.getContext('2d'); /** 這裡是建立自己的畫布 */

第二步：(前方高能) 開始製作驗證碼了

ctx.fillStyle = randColor(170, 250); /** 繪製一個背景顏色，這裡呼叫了一個方法後面介紹*/ctx.fillRect(0, 0, 120, 30);var data ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890'; /** 驗證碼數字*/for (var i = 0; i <= 90; i += 30) { //i = 0 30 60 90 var c = data[randNum(0, data.length - 1)]; /** 取到隨機的數 */ ctx.fillStyle = randColor(60, 160);    /** 設定字型顏色 */ ctx.font = randNum(15, 40) + 'px SimHei'; /** 繪製字型的大小*/ ctx.fillText(c, i + randNum(0, 15), randNum(15, 30));/*把隨機渠道的數字寫到我們的畫布上*/}

第三步：介紹一下里面的 randColor 方法 這個不必多說，傳入最大值最小之的區間取值

/** 最大值最小 */
function randColor(min, max) { var r = Math.floor(Math.random() * (max - min + 1) + min); var g = Math.floor(Math.random() * (max - min + 1) + min); var b = Math.floor(Math.random() * (max - min + 1) + min); return 'rgb(' + r + ',' + g + ',' + b + ')';}

第四步：說一下randNum 這個方法  其實和上面的方法相同 都是傳入最大值最小值的取值區間

function randNum(min, max) { var num = Math.floor(Math.random() * (max - min + 1) + min); return num;}

那麼就先說到這裡，下一篇來說說怎麼繪製干擾圖形