canvas绘制验证码

好的代码都是一行一行敲出来的，为了明天加油！

一：在html中创建一个canvas并设置一个"id"和宽高

           <canvas id="c3" width="120" height="30"></canvas>

二：利用css给canvas设置一个背静属性，在网页中显示出来。

            body{text-align: center}

            canvas{background: #ddd}

三：最重要的，利用js创建矩形；

　　1. 首先通过js原生dom找到id,然后设置画笔；

            var c3 = document.getElementById("c3");

　　　 var ctx = c3.getContext("2d");

        2. 创建一个矩形120*30，背景颜色随机；

      　　ctx.fillStyle = rc(180,230);

　　　  ctx.fillRect(0,0,120,30);

　　3. 创建随机字符串绘制矩形中

　　　　var pool = "ABCDEFGabcdefghi0123456789";

　　　　for(var i=0;i<4;i++){

　　　　　　var c = pool[rn(0,pool.length)];

　　　　　　ctx.textBaseline = "top";

　　　　　　var fs = rn(10,30);

　　　　　　ctx.font = fs+"px SimHei";

　　　　　　ctx.fillStyle = rc(30,180);

　　　　　　ctx.fillText(c,30*i,0);

　　　　}

　　4. 创建5条干扰线

　　　　for(var i=0;i<5;i++){

　　　　　　ctx.beginPath();

　　　　　　ctx.strokeStyle = rc(0,230);

　　　　　　ctx.moveTo(rn(0,120),rn(0,30));

　　　　　　tx.lineTo(rn(0,120),rn(0,30));

　　　　　　ctx.stroke();

　　　　}

　　 5. 创建50个干扰点

　　　　for(var i=0;i<50;i++){

　　　　　　ctx.fillStyle = rc(0,255);

　　　　　　ctx.beginPath();

　　　　　　ctx.arc(rn(0,120),rn(0,30),1,0,2*Math.PI);

　　　　　　ctx.fill();

　　　　}

　　　　function rn(min,max){

　　　　　　var n = Math.random()*(max-min)+min;

　　　　　　return Math.floor(n);

　　　　}

　　　　function rc(min,max){

　　　　　　var r = rn(min,max);

　　　　　　var g = rn(min,max);

　　　　　　var b = rn(min,max);

　　　　　　return `rgb(${r},${g},${b})`;

　　　　}

哇，终于结束了！写的不好，刚开始学习web。需要的朋友可以参照考一下。个人QQ：1669902328.