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 相关文章推荐
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
JavaScript实现登录窗体
Jun 22 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP在线书签系统分享
2016/01/04 PHP
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
js实现微信聊天界面
2020/08/09 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python基础练习之用户登录实现代码分享
2017/11/08 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
学校领导班子对照检查材料
2014/09/24 职场文书
临时用工协议书范本
2014/10/29 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js