第二步

在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怎么实现一个生成随机图形功能有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。