![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c2b0417d74a4d0b4ae5cf35672e524bc.png#pic_center)
function randomNum(min,max){
return Math.floor( Math.random()*(max-min)+min);
}
function randomColor(min,max){
let r = randomNum(min,max);
let g = randomNum(min,max);
let b = randomNum(min,max);
return "rgb("+r+","+g+","+b+")";
}
let yzm = '';
function drawPic(){
yzm = '';
let canvas=document.getElementById("canvas");
let width=canvas.width;
let height=canvas.height;
let ctx = canvas.getContext('2d');
ctx.textBaseline = 'bottom';
ctx.fillStyle = randomColor(180,240);
ctx.fillRect(0,0,width,height);
let str = 'ABCEFGHJKLMNPQRSTWXY123456789';
for(let i=0; i<4; i++){
let txt = str[randomNum(0,str.length)];
yzm += txt;
ctx.fillStyle = randomColor(50,160);
ctx.font = randomNum(15,40)+'px SimHei';
let x = 10+i*25;
let y = randomNum(25,45);
let deg = randomNum(-45, 45);
ctx.translate(x,y);
ctx.rotate(deg*Math.PI/180);
ctx.fillText(txt, 0,0);
ctx.rotate(-deg*Math.PI/180);
ctx.translate(-x,-y);
}
for(let i=0; i<8; i++){
ctx.strokeStyle = randomColor(40,180);
ctx.beginPath();
ctx.moveTo( randomNum(0,width), randomNum(0,height));
ctx.lineTo( randomNum(0,width), randomNum(0,height));
ctx.stroke();
}
for(let i=0; i<100; i++){
ctx.fillStyle = randomColor(0,255);
ctx.beginPath();
ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);
ctx.fill();
}
}
$('#canvas').on('click',function(){
drawPic();
console.log(yzm);
})
<a href="#a">
<canvas id="canvas" width="120" height="40" style="background-image: url(img/001.png);"></canvas></a>