<canvas id="mycanvas" width='90' height='40'> 您的瀏覽器不支持canvas，請換個瀏覽器試試~</canvas><style>#mycanvas{ cursor: pointer;}</style>

/*生成4位隨機數*/ function rand(){  var str="abcdefghijklmnopqrstuvwxyz0123456789";  var arr=str.split("");  var validate="";  var ranNum;  for(var i=0;i<4;i++){   ranNum=Math.floor(Math.random()*36); //隨機數在[0,35]之間   validate+=arr[ranNum];  }  return validate; } /*干擾線的隨機x坐標值*/ function lineX(){  var ranLineX=Math.floor(Math.random()*90);  return ranLineX; } /*干擾線的隨機y坐標值*/ function lineY(){  var ranLineY=Math.floor(Math.random()*40);  return ranLineY; } function clickChange(){  var mycanvas=document.getElementById('mycanvas');  var cxt=mycanvas.getContext('2d');  cxt.fillStyle='#000';  cxt.fillRect(0,0,90,40);  /*生成干擾線20條*/  for(var j=0;j<20;j++){   cxt.strokeStyle='#fff';   cxt.beginPath(); //若省略beginPath，則每點擊一次驗證碼會累積干擾線的條數   cxt.moveTo(lineX(),lineY());   cxt.lineTo(lineX(),lineY());   cxt.lineWidth=0.5;   cxt.closePath();   cxt.stroke();  }  cxt.fillStyle='red';  cxt.font='bold 20px Arial';  cxt.fillText(rand(),25,25); //把rand()生成的隨機數文本填充到canvas中   } clickChange(); /*點擊驗證碼更換*/ mycanvas.onclick=function(e){  e.preventDefault(); //阻止鼠標點擊發生默認的行為  clickChange(); };