javascript实现点击产生随机图形


Posted in Javascript onJanuary 25, 2021

本文实例为大家分享了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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
js数组去重的方法总结
Jan 18 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 #Vue.js
json.stringify()与json.parse()的区别以及用处
Jan 25 #Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 #Vue.js
ReactRouter的实现方法
Jan 25 #Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 #Javascript
vue 计算属性和侦听器的使用小结
Jan 25 #Vue.js
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 #Javascript
You might like
一个简易需要注册的留言版程序
2006/10/09 PHP
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
PHP中ADODB类详解
2008/03/25 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
Prototype Template对象 学习
2009/07/19 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
js实现tab切换效果
2017/02/16 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Saltstack快速入门简单汇总
2016/03/01 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
实习生体会的自我评价范文
2013/11/28 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
小学生新学期寄语
2014/01/19 职场文书
双十佳事迹材料
2014/01/29 职场文书
违反工作纪律检讨书
2014/02/15 职场文书