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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
JS中Array数组学习总结
Jan 18 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
了解JavaScript中的选择器
May 24 Javascript
实例讲解React 组件生命周期
Jul 08 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数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
smarty表格换行实例
2014/12/15 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
php编程每天必学之验证码
2016/03/03 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
js格式化时间小结
2014/11/03 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
js实现简单的验证码
2015/12/25 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
js转html实体的方法
2016/09/27 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
在vue中使用G2图表的示例代码
2019/03/19 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
TCP/IP的分层模型
2013/10/27 面试题
高中校园广播稿
2014/01/11 职场文书
便利店的创业计划书
2014/01/15 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
JavaScript设计模式之原型模式详情
2022/06/21 Javascript