JavaScript generates random graphics by clicking

This article shares the specific code of javascript to realize the generation of random graphics by clicking for your reference. The specific content is as follows

Click to generate random graphics

The effect is as follows:

Implemented with JavaScript

Mainly use canvas and random functions to complete various graphics

first step

Create the rectangle where the graphic will appear and the two buttons in HTML and CSS. The first button is used to generate graphics, and the second button is used to clear all generated graphics.

<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="Click to generate">
  <input type="button" id="cle" value="Click to clear">
 </div>
</body>

Step 2

In javascript, create functions for random colors, functions for randomly generating graphics when clicked, and functions for clearing the screen when clicked.

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

Set the random color of the shape

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

Set up a function to randomly generate graphics when clicking a button. The first type is solid and hollow rectangles, the second type is solid and hollow circles, and the third type is a straight line. Write random functions for their positions and sizes, and then add canvas codes to draw graphics, such as 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();
  }
}

Step 3

Finally, create a button function to clear the screen. According to the created screen size, add context.clearRect(0,0,600,600) in canvas to clear the screen.

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

Click to generate random graphics effect!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: