js实现随机圆与矩形功能


Posted in Javascript onOctober 29, 2020

本文实例为大家分享了js实现随机圆与矩形功能的具体代码,供大家参考,具体内容如下

1、节点操作版

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>DOM节点操作版本</title>
</head>
<style>
 *{
  margin: 0;padding: 0;
 }
 html,body,.box{
  width: 100%;height: 100%;
 }
 #content{
  background: #f5f5f5;
 }
 .circle{
  border-radius: 50%;position: absolute;
 }
 .rect{
  position: absolute;
 }
 .btn{
  position: fixed;top: 0;left: 0;
 }
</style>
<body>
 <div id="content" class="box"></div>
 <div class="btn">
  <button id="createCircle">创建随机圆</button>
  <button id="createRect">创建随机矩形</button>
 </div>
</body>
<script>
 class Public{
  constructor(){
   this.x = this.randomR(0,1800);
   this.y = this.randomR(40,806);
   this.color = this.randomColor();
   this.r = this.randomR(10,20);
  }
  randomR(min,max){//指定范围内的随机半径
   return parseInt(Math.random() * (max - min) + min);
  }
  randomColor(){//随机颜色
   let rgba = `rgba(${this.randomR(0,255)},${this.randomR(0,255)},${this.randomR(0,255)},1)`;
   return rgba;
  }
 }
 class Circle extends Public{
  constructor(){
   super();
  }
  circle(){
   const {r,x,y,color} = this;
   const contentElem = document.getElementById("content");
   let declareElem = document.createElement("div");
   declareElem.className = "circle";
   declareElem.style.width = `${r * 2}px`;
   declareElem.style.height = `${r * 2}px`;
   declareElem.style.background = color;
   declareElem.style.top = `${y}px`;
   declareElem.style.left = `${x}px`;
   contentElem.appendChild(declareElem);
  }
 }
 class Rect extends Public{
  constructor(){
   super();
  }
  rect(){
   const {x,y,color} = this;
   const contentElem = document.getElementById("content");
   let declareElem = document.createElement("div");
   declareElem.className = "rect";
   declareElem.style.width = `${this.randomR(20,30)}px`;
   declareElem.style.height = `${this.randomR(20,30)}px`;
   declareElem.style.background = color;
   declareElem.style.top = `${y}px`;
   declareElem.style.left = `${x}px`;
   contentElem.appendChild(declareElem);
  }
 }
 document.getElementById("createCircle").onclick = () => {
  new Circle().circle();
 }
 document.getElementById("createRect").onclick = () => {
  new Rect().rect();
 }
</script>
</html>

2、鼠标拖动版本(矩形版本类似)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>鼠标拖动版本</title>
</head>
<style>
 *{
  margin: 0;padding: 0;
 }
 html,body,.box{
  width: 100%;height: 100%;
 }
 #content{
  background: #f5f5f5;
 }
 .circle{
  border-radius: 50%;position: absolute;
 }
</style>
<body>
 <div id="content" class="box"></div>
</body>
<script>
 class Public{
  constructor(x,y){
   this.x = x;
   this.y = y;
   this.color = this.randomColor();
   this.r = this.randomR(10,20);
  }
  randomR(min,max){//指定范围内的随机半径
   return parseInt(Math.random() * (max - min) + min);
  }
  randomColor(){//随机颜色
   let rgba = `rgba(${this.randomR(0,255)},${this.randomR(0,255)},${this.randomR(0,255)},1)`;
   return rgba;
  }
 }
 class Circle extends Public{
  constructor(x,y){
   super(x,y);
  }
  circle(){
   const {r,x,y,color} = this;
   const contentElem = document.getElementById("content");
   let declareElem = document.createElement("div");
   declareElem.className = "circle";
   declareElem.style.width = `${r * 2}px`;
   declareElem.style.height = `${r * 2}px`;
   declareElem.style.background = color;
   declareElem.style.top = `${y}px`;
   declareElem.style.left = `${x}px`;
   contentElem.appendChild(declareElem);
   setTimeout(() => {
    declareElem.remove();
   },100);
  }
 }
 document.getElementById("content").onmousemove = (e) => {
  const {clientX,clientY} = e || window.event;
  new Circle(clientX,clientY).circle();
 }
</script>
</html>

3、canvas版本

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  #canvas{margin: 0 auto;background: #000;box-shadow: 0 0 10px #000;}
 </style>
</head>
<body>
 <canvas id="canvas"></canvas>
</body>
<script>
 var _={
  random:function(start,stop){
   return parseInt(Math.random()*(stop-start)+start);
  }
 }
 window.onload=function(){
  const canvas=document.getElementById("canvas");
  const ctx=canvas.getContext("2d");
  canvas.width="1000";
  canvas.height="600";
  class ball{
   constructor(x,y,color){
    this.x=x;
    this.y=y;
    this.r=40;
    this.color=color;
   }
   render(){
    ctx.save();
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
    ctx.fillStyle=this.color;
    ctx.fill();
    ctx.restore();
   }
  }
  class moveBall extends ball{
   constructor(x,y,color){
    super(x,y,color);
    this.dx=_.random(-5,5);
    this.dy=_.random(-5,5);
    this.dr=_.random(1,3);
   }
   updated(){
    this.x+=this.dx;
    this.y+=this.dy;
    this.r-=this.dr;
    if(this.r<=0){
     this.r=0;
    }
   }
  }
  let BallArr=[];
  let Color=["red","green","blue","white","orange"];
  canvas.addEventListener("mousemove",function(e){
   let Ball=new moveBall(e.offsetX,e.offsetY,Color[_.random(0,Color.length-1)]);
   BallArr.push(Ball);
  });
  setInterval(()=>{
   ctx.clearRect(0,0,canvas.width,canvas.height);
   for(let i=0;i<BallArr.length;i++){
    BallArr[i].render();
    BallArr[i].updated();
   }
  },50);
 }
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
js window.event对象详尽解析
Feb 17 Javascript
JQuery中的ready函数冲突的解决方法
May 17 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 #Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 #Javascript
design vue 表格开启列排序的操作
Oct 28 #Javascript
ant design vue导航菜单与路由配置操作
Oct 28 #Javascript
JS实现多功能计算器
Oct 28 #Javascript
JS实现简单贪吃蛇小游戏
Oct 28 #Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 #Javascript
You might like
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
PHP ajax 分页类代码
2008/11/13 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
javascript call和apply方法
2008/11/24 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
将python代码和注释分离的方法
2018/04/21 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Python运行异常管理解决方案
2020/03/09 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
大学自荐信
2013/12/12 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
中学教师自我鉴定
2014/02/07 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
2014小学年度工作总结
2014/12/20 职场文书
邀请函范文
2015/02/02 职场文书
道歉信范文
2015/05/12 职场文书
施工现场安全管理制度
2015/08/05 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS