js實現隨機圓與矩形功能
阿新 • • 發佈:2020-10-29
本文例項為大家分享了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,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,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,.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,1)`; return rgba; } } class Circle extends Public{ constructor(x,y){ super(x,y); } circle(){ const {r,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,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,Math.PI*2); ctx.fillStyle=this.color; ctx.fill(); ctx.restore(); } } class moveBall extends ball{ constructor(x,color){ super(x,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,canvas.width,canvas.height); for(let i=0;i<BallArr.length;i++){ BallArr[i].render(); BallArr[i].updated(); } },50); } </script> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。