<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>绘制验证码图片</h1>
<canvas id="canvas3" width="120" height="30"></canvas>
<script>
var ctx = canvas3.getContext('2d');
/**绘制一个随机的背景颜色——填充一个矩形**/
ctx.fillStyle = randColor(170,250); //浅色
ctx.fillRect(0,0,120,30);
/**绘制4个随机的字符**/
var data = 'ABCDEFGHJKMNPQRSTWXY3456789';
//四个大小、颜色各部相同的字符串
//此处应该使用for循环
var c1 = data[randNum(0,data.length)];
ctx.fillStyle = randColor(60,160);//文字颜色
ctx.font = randNum(15,40)+'px SimHei';//文字大小
ctx.fillText(c1, randNum(0,15), randNum(15,30));
var c2 = data[randNum(0,data.length)];
ctx.fillStyle = randColor(60,160);//文字颜色
ctx.font = randNum(15,40)+'px SimHei';//文字大小
ctx.fillText(c2, 30+randNum(0,15), randNum(15,30));
var c3 = data[randNum(0,data.length)];
ctx.fillStyle = randColor(60,160);//文字颜色
ctx.font = randNum(15,40)+'px SimHei';//文字大小
ctx.fillText(c3, 60+randNum(0,15), randNum(15,30));
var c4 = data[randNum(0,data.length)];
ctx.fillStyle = randColor(60,160);//文字颜色
ctx.font = randNum(15,40)+'px SimHei';//文字大小
ctx.fillText(c4, 90+randNum(0,15), randNum(15,30));
/**绘制颜色随机的干扰线**/
for(var i=0; i<10; i++){
ctx.beginPath(); //每一根线是一条新路径
ctx.moveTo( randNum(0,120), randNum(0,30) );
ctx.lineTo( randNum(0,120), randNum(0,30) );
ctx.strokeStyle = randColor(60,160);
ctx.stroke();
}
//产生一个随机的颜色值
function randColor(min,max){
var r = Math.floor(Math.random()*(max-min)+min);
var g = Math.floor(Math.random()*(max-min)+min);
var b = Math.floor(Math.random()*(max-min)+min);
return 'rgb('+r+','+g+','+b+')';
}
//产生一个随机的整数值
function randNum(min,max){
var num = Math.floor(Math.random()*(max-min)+min);
return num;
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>绘制验证码图片</h1>
<canvas id="canvas3" width="120" height="30"></canvas>
<script>
var ctx = canvas3.getContext('2d');
/**绘制一个随机的背景颜色——填充一个矩形**/
ctx.fillStyle = randColor(170,250); //浅色
ctx.fillRect(0,0,120,30);
/**绘制4个随机的字符**/
var data = 'ABCDEFGHJKMNPQRSTWXY3456789';
//四个大小、颜色各部相同的字符串
//此处应该使用for循环
var c1 = data[randNum(0,data.length)];
ctx.fillStyle = randColor(60,160);//文字颜色
ctx.font = randNum(15,40)+'px SimHei';//文字大小
ctx.fillText(c1, randNum(0,15), randNum(15,30));
var c2 = data[randNum(0,data.length)];
ctx.fillStyle = randColor(60,160);//文字颜色
ctx.font = randNum(15,40)+'px SimHei';//文字大小
ctx.fillText(c2, 30+randNum(0,15), randNum(15,30));
var c3 = data[randNum(0,data.length)];
ctx.fillStyle = randColor(60,160);//文字颜色
ctx.font = randNum(15,40)+'px SimHei';//文字大小
ctx.fillText(c3, 60+randNum(0,15), randNum(15,30));
var c4 = data[randNum(0,data.length)];
ctx.fillStyle = randColor(60,160);//文字颜色
ctx.font = randNum(15,40)+'px SimHei';//文字大小
ctx.fillText(c4, 90+randNum(0,15), randNum(15,30));
/**绘制颜色随机的干扰线**/
for(var i=0; i<10; i++){
ctx.beginPath(); //每一根线是一条新路径
ctx.moveTo( randNum(0,120), randNum(0,30) );
ctx.lineTo( randNum(0,120), randNum(0,30) );
ctx.strokeStyle = randColor(60,160);
ctx.stroke();
}
//产生一个随机的颜色值
function randColor(min,max){
var r = Math.floor(Math.random()*(max-min)+min);
var g = Math.floor(Math.random()*(max-min)+min);
var b = Math.floor(Math.random()*(max-min)+min);
return 'rgb('+r+','+g+','+b+')';
}
//产生一个随机的整数值
function randNum(min,max){
var num = Math.floor(Math.random()*(max-min)+min);
return num;
}
</script>
</body>
</html>