欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

利用javascript怎么實現(xiàn)一個生成隨機(jī)圖形功能-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)利用javascript怎么實現(xiàn)一個生成隨機(jī)圖形功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)公司憑借專業(yè)的設(shè)計團(tuán)隊扎實的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識和豐厚的資源優(yōu)勢，提供專業(yè)的網(wǎng)站策劃、網(wǎng)站制作、成都網(wǎng)站制作、網(wǎng)站優(yōu)化、軟件開發(fā)、網(wǎng)站改版等服務(wù)，在成都10余年的網(wǎng)站建設(shè)設(shè)計經(jīng)驗，為成都1000+中小型企業(yè)策劃設(shè)計了網(wǎng)站。

第一步


在HTML和CSS中創(chuàng)建出現(xiàn)圖形的矩形和兩個按鈕。第一個按鈕用來產(chǎn)生圖形，第二個按鈕用來清除產(chǎn)生的所有圖形。

<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="點(diǎn)擊生成">
  <input type="button" id="cle" value="點(diǎn)擊清除">
 </div>
</body>

第二步


在javascript中分別創(chuàng)建用來隨機(jī)顏色的函數(shù)，點(diǎn)擊隨機(jī)產(chǎn)生圖形的函數(shù)，點(diǎn)擊清除屏幕的函數(shù)。

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

設(shè)置圖形的隨機(jī)顏色

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;
 }

設(shè)置點(diǎn)擊按鈕隨機(jī)產(chǎn)生圖形的函數(shù)，第一種實心和空心矩形，第二種實心和空心圓，第三種直線，它們的位置和大小分別寫隨機(jī)函數(shù)，再分別加上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();
  }
}

第三步

最后創(chuàng)建點(diǎn)擊清除屏幕的按鈕函數(shù),根據(jù)創(chuàng)建的屏幕大小，在canvas中添加 context.clearRect(0,0,600,600);可實現(xiàn)清除屏幕。

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

看完上述內(nèi)容，你們對利用javascript怎么實現(xiàn)一個生成隨機(jī)圖形功能有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

當(dāng)前標(biāo)題：利用javascript怎么實現(xiàn)一個生成隨機(jī)圖形功能-創(chuàng)新互聯(lián)
鏈接分享：http://chinadenli.net/article10/gcjdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站策劃、云服務(wù)器、企業(yè)網(wǎng)站制作、小程序開發(fā)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)