首先，canvas：固定在瀏覽器上的畫布，瀏覽器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其屬性和方法。
canvas為我們敞開了新一扇大門。
屬於HTML5中新增的一個標簽，看起來與其他標簽區別不大，在驗證碼之前，應該學習canvas相關API，

本次用到的canvas方法 ：
fillStyle 設置或返回用於填充繪畫的顏色、漸變或模式
strokeStyle 設置或返回用於筆觸的顏色、漸變或模式
fillRect() 繪制“被填充”的矩形
stroke() 繪制已定義的路徑
moveTo() 把路徑移動到畫布中的指定點，不創建線條

var canvas = document.querySelector("#canvas");
console.log(canvas);
var cxt = canvas.getContext(‘2d‘);//繪圖上下文環境

//繪制驗證碼圖片
draw();
canvas.onclick = function(){
// console.log(‘1‘);
draw();

};
function draw(){
// 繪制一個顏色隨機的矩形
cxt.beginPath();
cxt.fillStyle = randColor(170,250);//把顏色放到一個方法
cxt.fillRect(0,0,120,30);
cxt.closePath();
var data = ‘abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ0123456789‘;
for(var i = 0; i <= 90; i +=30){//四位驗證碼
var c = data[randNum(0,data.length - 1)];

cxt.beginPath();
cxt.fillStyle = randColor(60,160);
cxt.font = randNum(15,40) + ‘px SimHei‘;
cxt.fillText(c, i + randNum(0,15),randNum(15,30));//[0,15) [30,45) [60,75) [90,115)
cxt.closePath();
}
//渲染幹擾線
for(var j = 0; j < 10; j ++){
cxt.beginPath();
cxt.moveTo(randNum(0,120), randNum(0,120));//這裏的randNum(min,max)與canvas的畫板寬高相聯系，
cxt.lineTo(randNum(0,120), randNum(0,120));
cxt.strokeStyle = randColor(60,120);
cxt.stroke();
}
for(var i = 0; i < 10; i ++){
cxt.beginPath();
cxt.strokeStyle = randColor(50,130);
cxt.arc(randNum(0,120),randNum(0,30),randNum(1,3),0,2*Math.PI);
cxt.stroke();
cxt.closePath();
}
}
function randColor(min,max){//max+1是取不到的，但是max是可以取到的，所以向下取整剛好取到[min,max]。
var r = Math.floor(Math.random()*(max-min + 1)+min);//Math.random * （max- min)==>[o,min)變成[min,max-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+‘)‘;
}

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

實現canvas簡單的驗證碼