js 랜덤 원과 직사각형 기능 구현

7472 단어 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 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>
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
[BOJ 2178] 미로 탐색(Python)
TIL 03___HTML basic 3(label, input)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage