JavaScriptはクリックするとランダムなグラフィックを生成します

<スタイル>
  *{
   マージン: 0;
   パディング: 0;
  }
  ＃キャンバス{
   境界線: 実線 1px 赤;
   表示: ブロック;
   マージン: 0 自動;
  }
  ＃父親{
   幅: 200ピクセル;
   マージン:0 自動;
   
  }
  #ボタン{
   右マージン: 40px;
   カーソル: ポインタ;
  }
  #cle{
   カーソル: ポインタ;
  }
</スタイル>

<本文>
 <キャンバスid="キャンバス" 幅="600" 高さ="600"></キャンバス>
 <div id="父">
  <input type="button" id="btn" value="クリックして生成">
  <input type="button" id="cle" value="クリックしてクリア">
 </div>
</本文>

var キャンバス = document.getElementById("キャンバス");
 var コンテキスト = canvas.getContext("2d");
 var btn = document.getElementById("btn");
 var cle = document.getElementById("cle");

関数 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+")";
  bg を返します。
 }

btn.onclick=関数(){
  var ランダム = Math.floor(Math.random()*3+1);
  if(ランダム==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){
    コンテキスト.beginPath();
    context.strokeStyle=色();
    context.strokeRect(rectx,recty,rectwidth,rectheight)
    コンテキスト.closePath();
   }
   それ以外 {
    コンテキスト.beginPath();
    context.fillStyle=色();
    context.fillRect(rectx,recty,rectwidth,rectheight);
    コンテキスト.closePath();
   }
  }
  そうでない場合(ランダム == 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);
   （arcr==0）の場合{
    コンテキスト.beginPath();
    context.strokeStyle=色();
    context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
    コンテキスト.stroke();
    コンテキスト.closePath();
   }
  
   それ以外{
    コンテキスト.beginPath();
    context.fillStyle=色();
    context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
    コンテキストを埋め込む();
    コンテキスト.closePath();
   }
  }
  そうでない場合(ランダム==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);
   コンテキスト.beginPath();
   context.strokeStyle=色();
   コンテキストをmoveTo(movex,movey);
   コンテキストのlineTo(linex,liney);
   context.lineWidth=linew;
   コンテキスト.stroke();
   コンテキスト.closePath();
  }
}

cle.onclick=関数(){
  コンテキスト.beginPath();
  コンテキストをクリアする矩形(0,0,600,600);
  コンテキスト.closePath();
 }