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 相关文章推荐
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
angular2使用简单介绍
2016/03/01 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
C#公司笔试题
2014/03/28 面试题
学习委员自我鉴定
2014/01/13 职场文书
单位介绍信范文
2014/01/18 职场文书
二人合伙经营协议书
2014/09/13 职场文书
民事答辩状范本
2015/05/21 职场文书
晚会开幕词范文
2016/03/04 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python