效果圖：
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;}
#can{
border:1px solid #666;
}
</style>
</head>
<body>
<canvas id='can'>
</canvas>
<script>
//創建2d渲染區域以及初始化
var c = document.getElementById('can');
var ctx = c.getContext("2d");
var res;
function ran(a,b){
return Math.floor(Math.random()*(b-a+1))+a;
}
//draw函數
function draw(){
res="";
ctx.clearRect(0, 0, 300, 150)
//線
for(var i= 0;i<80;i++){
ctx.strokeStyle = "rgba("+ran(0,255)+","+ran(0,255)+","+ran(0,255)+","+ran(0,100)/100+")";
ctx.beginPath();
ctx.lineWidth = ran(1,4);
ctx.moveTo(ran(0,300), ran(0,150));
ctx.lineTo(ran(0,300), ran(0,150));
ctx.stroke();
}
//圓點
for(var i= 0;i<80;i++){
ctx.beginPath();
ctx.fillStyle = "rgba("+ran(0,255)+","+ran(0,255)+","+ran(0,255)+","+ran(0,100)/100+")";
ctx.arc(ran(0,300),ran(0,150),ran(1,8),0,2*Math.PI);
ctx.fill();
}
//字符
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
for(var i=0;i<4;i++){
var strRan = str[ran(0,35)];
ctx.fillStyle = "rgb("+ran(0,255)+","+ran(0,255)+","+ran(0,255)+")"
ctx.font = ran(50,80)+"px 微軟雅黑"
ctx.fillText(strRan,i*50+50,100);
res+=strRan;
}
console.log(res)
}
draw();
c.onclick = draw;
</script>
</body>
</html>