javascript實現點擊產生隨機圖形

Posted on by

本文實例為大傢分享瞭javascript實現點擊產生隨機圖形的具體代碼，供大傢參考，具體內容如下

點擊產生隨機圖形

效果如下：

用javascript來實現

主要用canvas和隨機函數完成各種圖形

第一步

在HTML和CSS中創建出現圖形的矩形和兩個按鈕。第一個按鈕用來產生圖形，第二個按鈕用來清除產生的所有圖形。

<style>
  *{
   margin: 0;
   padding: 0;
  }
  #canvas{
   border: solid 1px red;
   display: block;
   margin: 0 auto;
  }
  #father{
   width: 200px;
   margin:0 auto;
   
  }
  #btn{
   margin-right: 40px;
   cursor: pointer;
  }
  #cle{
   cursor: pointer;
  }
</style>
<body>
 <canvas id="canvas" width="600" height="600"></canvas>
 <div id="father">
  <input type="button" id="btn" value="點擊生成">
  <input type="button" id="cle" value="點擊清除">
 </div>
</body>

第二步

在javascript中分別創建用來隨機顏色的函數，點擊隨機產生圖形的函數，點擊清除屏幕的函數。

var canvas=document.getElementById("canvas");
 var context=canvas.getContext("2d");
 var btn=document.getElementById("btn");
 var cle=document.getElementById("cle");

設置圖形的隨機顏色

function color(){
  var r=Math.floor(Math.random()*255);
  var g=Math.floor(Math.random()*255);
  var b=Math.floor(Math.random()*255);
  var a=Math.random();
  var bg="rgba("+r+","+g+","+b+","+a+")";
  return bg;
 }

設置點擊按鈕隨機產生圖形的函數，第一種實心和空心矩形，第二種實心和空心圓，第三種直線，它們的位置和大小分別寫隨機函數，再分別加上canvas代碼，用來畫圖形，如context.beginPath()-context closePath()。

btn.onclick=function(){
  var random=Math.floor(Math.random()*3+1);
  if(random==1){
   var rectr=Math.floor(Math.random()*2);
   var rectx=Math.floor(Math.random()*600);
   var recty=Math.floor(Math.random()*600);
   var rectwidth=Math.floor(Math.random()*200+200);
   var rectheight=Math.floor(Math.random()*200+200);
   if(rectr== 0){
    context.beginPath();
    context.strokeStyle=color();
    context.strokeRect(rectx,recty,rectwidth,rectheight)
    context.closePath();
   }
   else {
    context.beginPath();
    context.fillStyle=color();
    context.fillRect(rectx,recty,rectwidth,rectheight);
    context.closePath();
   }
  }
  else if(random == 2){
   var arcr=Math.floor(Math.random()*2);
   var arcx=Math.floor(Math.random()*600);
   var arcy=Math.floor(Math.random()*600);
   var arcr=Math.floor(Math.random()*300);
   if(arcr==0){
    context.beginPath();
    context.strokeStyle=color();
    context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
    context.stroke();
    context.closePath();
   }
  
   else{
    context.beginPath();
    context.fillStyle=color();
    context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
    context.fill();
    context.closePath();
   }
  }
  else if(random==3){
   var movex=Math.floor(Math.random()*600);
   var movey=Math.floor(Math.random()*600);
   var linex=Math.floor(Math.random()*600);
   var liney=Math.floor(Math.random()*600);
   var linew=Math.floor(Math.random()*20);
   context.beginPath();
   context.strokeStyle=color();
   context.moveTo(movex,movey);
   context.lineTo(linex,liney);
   context.lineWidth=linew;
   context.stroke();
   context.closePath();
  }
}

第三步

最後創建點擊清除屏幕的按鈕函數,根據創建的屏幕大小，在canvas中添加 context.clearRect(0,0,600,600);可實現清除屏幕。

cle.onclick=function(){
  context.beginPath();
  context.clearRect(0,0,600,600);
  context.closePath();
 }

點擊產生隨機圖形的效果完成瞭！

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：