js随机圆与矩形功能

最新推荐文章于 2023-02-08 11:27:52 发布

Agwenbi

最新推荐文章于 2023-02-08 11:27:52 发布

阅读量346

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Ag_wenbi/article/details/109313216

版权

JavaScript 专栏收录该内容

47 篇文章 3 订阅

订阅专栏

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>

Agwenbi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
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> *
复制链接

扫一扫