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 jQuery插件练习
Dec 24 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
WebPack基础知识详解
Jan 16 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
JS实现拼图游戏
Jan 29 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
js实现小星星游戏
Mar 23 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
大家未必知道的Js技巧收藏
2008/04/07 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python中函数传参详解
2016/07/03 Python
Django开发中复选框用法示例
2018/03/20 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Python换行与不换行的输出实例
2020/02/19 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
django使用channels实现通信的示例
2020/10/19 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
Shell如何接收变量输入
2012/09/24 面试题
简洁的英文求职信范文
2014/05/03 职场文书
公开承诺书格式
2014/05/21 职场文书
争先创优活动总结
2014/08/27 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
财务务虚会发言材料
2014/10/20 职场文书
保外就医申请书范文
2015/08/06 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL