HTML
使用canvas画布绘制
<canvas width="400px" height="120px" id="canvas"></canvas>
js
分析:
- 随机的背景,随机的字体大小, 随机的线条, 随机的50个原点, 随机的 字体颜色,随机的位置 ----封装一个产生随机数的函数
- 根据不同的x y轴的 不同的位置
- 不同的背景颜色 rgba()
- 随机的线条,封装绘制 线条的函数
- 随机的圆点 ,for循环50个圆点绘制圆点的方法
//封装产生随机数的方法
function random(n){
return parseInt(Math.random()*n)
}
//这里字体的大小单独随机,限制最小的字体大小为40px
function size(){
return parseInt(Math.random()*40) + 40;
}
随机不同颜色的50个圆点
for (let i = 0; i < 50; i++) {
context.beginPath();
//开始绘制
//圆点的颜色
context.fillStyle = 'rgb('+ random(256) + ',' + random(256) + ',' + random(256) + ',0.3)';
//绘制圆
context.arc(random(400),random(120) , 2, 0, Math.PI / 180 * 360);
//实心填充
context.fill();
context.closePath();
}
随机不同的长度的线条,根据传入的参数,产生不同数量的线条
function line(n){
for (let i = 0; i < n; i++) {
//保存当前原点的坐标位置
context.save();
context.beginPath();
context.linewidth = random(6);
//随机的起点位置
context.moveTo(random(400), random(120) );
context.lineTo(random(400), random(120) );
//线条的样式
context.strokeStyle ='black';
context.stroke();
context.translate(350, 60);
//线条倾斜的角度
context.rotate(Math.PI / 180 * random(360));
//恢复原点的位置
context.restore();
//结束绘制
context.closePath();
}
}
//随机产生线条
line(5)
随机产生数字和字母
var str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXWZ";
var arr = str.split("");
//将所有会出现的验证数字和字母存储到一个数组里面
context.save();
//随机产生一个size() 的 字体样式
context.font = size() + "px 宋体";
//字体的颜色,这里用 rgb 文字用深色 ,背景用 rgba 浅色的背景
context.fillStyle ='rgb('+ random(256) + ',' + random(256) + ',' +random(256) + ')';
context.translate(50, 60);
//文本的旋转 随机角度
context.rotate(Math.PI / 180 * random(360));
//随机产生一个文本
context.fillText(arr[random(62)],-25, 10);
//恢复原点的位置
context.restore();