js实现随机圆与矩形功能

时间：2021-05-26

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章