javascript实现点击产生随机图形

本文实例为大家分享了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();
 }
    

点击产生随机图形的效果完成了！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JavaScript多种图形实现代码实例

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！