js实现随机圆与矩形功能

更新时间：2020年10月29日 08:40:41 作者：Agwenbi

这篇文章主要为大家详细介绍了js实现随机圆与矩形功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js绘制圆形和矩形的方法

JS中三目运算符和if else的区别分析与示例
本文是通过示例详细分析了JS中三目运算符和if else的区别，是篇非常不错的文章，这里推荐给大家。
2014-11-11
uniApp实现热更新的思路与详细过程
经常在做app的时候,会有做热更新的需求,这也是常用的更新app的一种手段,下面这篇文章主要给大家介绍了关于uniApp实现热更新的思路与详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
JS获得URL超链接的参数值实例代码
使用js获取超链接中keyword的参数值，具体实现代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-06-06
16个最流行的JavaScript框架[推荐]
这篇文章列举了当下最流行的16个 JavaScript 框架，既包含 jQuery 和 Mootools 等常规框架，也有Zepo这种支持智能手机触摸功能的移动JavaScript框架，如果你有更好的框架推荐，欢迎与我们分享。
2011-05-05
js取消单选按钮选中示例代码
取消单选按钮选中的方法有很多，下面为大家详细介绍下使用js是如何实现的，感兴趣的朋友不要错过
2013-11-11
一文快速弄懂webpack动态import原理
无论你开发使用的是CommonJS规范还是ES6模块规范,打包后的文件都统一使用webpack自定义的模块规范来管理、加载模块,下面这篇文章主要给大家介绍了关于webpack动态import原理的相关资料,需要的朋友可以参考下
2022-04-04
基于javascript实现tab切换特效
这篇文章主要介绍了基于javascript实现tab切换特效的相关资料,具有一定的参考价值，需要的朋友可以参考下
2016-03-03
javascript 实现的完全兼容鼠标滚轴缩放图片的代码
以前看到的都是用IE的zoom，所以非IE就不支持，昨天看到这个js中鼠标滚轮事件详解，于是完全兼容（IE6-8,FF,Chrome,Opera,Safari）的鼠标滚轴缩放图片效果今天就诞生了
2010-02-02
微信小程序仿微信运动步数排行(交互)
这篇文章主要介绍了微信小程序仿微信运动步数排行(交互)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
JavaScript eval() 函数介绍及应用示例
eval(String) 函数可计算某个字符串，并执行其中的的 JavaScript 代码，该方法只接受原始字符串作为参数
2014-07-07

js实现随机圆与矩形功能

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具