js Realizes Random Circle and Rectangle Function
- 2021-09-11 19:19:43
- OfStack
In this paper, we share the specific code of js to realize random circle and rectangle function for your reference. The specific contents are as follows
1. Node Operation Edition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Node operation version </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"> Create a random circle </button>
<button id="createRect"> Create a random rectangle </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){// Random radius within the specified range
return parseInt(Math.random() * (max - min) + min);
}
randomColor(){// Random color
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. Drag the mouse version (rectangular version is similar)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Drag the mouse version </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){// Random radius within the specified range
return parseInt(Math.random() * (max - min) + min);
}
randomColor(){// Random color
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 version
<!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>