javascript实现点击产生随机图形

更新时间：2021年01月25日 11:58:34 作者：半成熟、

这篇文章主要为大家详细介绍了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多种图形实现代码实例

ie支持function.bind()方法实现代码
在 google 一番技术资料后，发现 firefox 原生支持一个 bind 方法，该方法很好的满足了我们的初衷，调用方法与 call 和 apply 一样，只是定义完成后，在后期调用时该方法才会执行,需要的朋友可以了解下
2012-12-12
js对象数组按属性快速排序
前一篇《关于selector性能比赛》中提到，目测觉得在$("div,p,a")这样有逗号时，sizzle耗时异常（600多个元素，花了200ms），说是它可能没有优化ie下的排序。
2011-01-01
JavaScript实现的双向跨域插件分享
这篇文章主要介绍了JavaScript实现的双向跨域插件分享,本文实现把整个跨域过程抽象出来,封装成一个JavaScript插件,需要的朋友可以参考下
2015-01-01
js动态给table添加/删除tr的方法
这篇文章介绍了js动态给table添加/删除tr的方法，有需要的朋友可以参考一下
2013-08-08
JavaScript中奇葩的假值示例应用
这篇文章主要介绍了JavaScript中奇葩的假值应用,需要的朋友可以参考下
2014-03-03
深入JS继承
这篇文章主要介绍了深入JS继承，对继承感兴趣的同学，可以参考下
2021-05-05
正则表达式删除JavaScript代码中的空格、注释和换行符
这篇文章主要介绍了正则表达式删除JavaScript代码中的空格、注释和换行符,需要的朋友可以参考下
2023-12-12
js实现支付倒计时返回首页
这篇文章主要为大家详细介绍了js实现支付倒计时返回首页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
简单了解TypeScript中如何继承 Error 类
这篇文章主要介绍了简单了解TypeScript中如何继承 Error 类，一个典型的网站服务器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。我们希望这些类都拥有 Error 的特性：有错误消息、有调用栈、有方便打印的 toString 等。,需要的朋友可以参考下
2019-06-06
详解JavaScript实现动态的轮播图效果
这篇文章主要介绍了JavaScript实现动态的轮播图效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04