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 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 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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備