<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<canvas id="mycanvas" width="90" height="40">
</canvas>
<style type="text/css">
#mycanvas{
cursor: pointer;
}
</style>
<script type="text/javascript">
function rand() {
var str="abcdefghijklmnopqrstuvwxyz0123456789";
var arr=str.split("");
var add="";
var ranNum;
for(var i=1;i<=4;i++){
ranNum=Math.floor(Math.random()*36);
add+=arr[ranNum];
}
return add;
}
function lineX() {
return Math.floor(Math.random()*90);
}
function lineY() {
return Math.floor(Math.random()*40);
}
function clickchage() {
var mycanvas=document.getElementById("mycanvas");
var cxt=mycanvas.getContext('2d');
cxt.fillStyle="#000";
cxt.fillRect(0,0,90,40);
for(var i=1;i<20;i++){
cxt.strokeStyle="green";
cxt.beginPath();
cxt.moveTo(lineX(),lineY());
cxt.lineTo(lineX(),lineY());
cxt.lineWidth=0.5;
cxt.closePath();
cxt.stroke();
}
cxt.fillStyle="red";
cxt.font="20px 楷体";
cxt.fillText(rand(),25,25);
}
clickchage();
mycanvas.onclick=function () {
clickchage();
}
</script>
</head>
<body>
</body>
</html>