2021-04-25canvas以及css动画轮播

最新推荐文章于 2023-05-23 20:32:50 发布

wyystyle

最新推荐文章于 2023-05-23 20:32:50 发布

阅读量118

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/wyystyle/article/details/116127163

版权

canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>ball</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #canvas { display: block; position:absolute; left: 0;top: 0;z-index: -1;}
        .main{
            width: 1200px;
            height: 100vh;
            margin: 0 auto;
            background: rgba(0, 0, 0, 0.7);
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .big{
            perspective: 100000px;
            position: relative;
            left: 50%;
            top: 20%;
            width: 400px;
            height: 400px;
            transform-style: preserve-3d;
            transform-origin: 0% 0%;
            animation: amit 8s linear infinite;
            /* transform:rotateX(-30deg)rotateY(0deg); */
        }
        img{
            position: absolute;
            width: 200px !important;
            border: 2px solid #fff;
            cursor: pointer;
            /* box-sizing: border-box; */
        }
        .img1{
            transform:translate3d(-95px,0px,260px)rotateY(0deg);
        }
        .img2{
            transform:translate3d(150px,0,130px)rotateY(60deg);
        }
        .img3{
            transform:translate3d(150px,0,-130px)rotateY(120deg);
        }
        .img4{
            transform:translate3d(-100px,0,-260px)rotateY(180deg);
        }
        .img5{
            transform:translate3d(-325px,0,-130px)rotateY(240deg);
        }
        .img6{
            transform:translate3d(-325px,0,130px)rotateY(300deg);
        }
        .big:hover {
            animation-play-state:paused;
        }
        @keyframes amit{
            0%{
                transform:rotateX(-30deg)rotateY(0deg);
            }
            100%{
                transform:rotateX(-30deg)rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    </canvas>
    <div class="main">
        <div class="big">
            <img class="img1" src="https://sjbz-fd.zol-img.com.cn/t_s320x510c5/g6/M00/0F/00/ChMkKmBJeSGIfmraAAGr118cf7QAALOSAOBu-YAAavv464.jpg" alt="">
            <img class="img2" src="https://sjbz-fd.zol-img.com.cn/t_s320x510c5/g6/M00/0F/00/ChMkKmBJeSGICt29AAJ_qsPcO0kAALOSAOGyPcAAn_C667.jpg" alt="">
            <img class="img3" src="https://sjbz-fd.zol-img.com.cn/t_s320x510c5/g6/M00/0F/00/ChMkKWBJeSGIEyMVAAFT2SWjw_kAALOSAORwpsAAVPx368.jpg" alt="">
            <img class="img4" src="https://sjbz-fd.zol-img.com.cn/t_s320x510c5/g6/M00/0F/00/ChMkKmBJeSGIGL7fAAJhJKw1hxMAALOSAONmugAAmE8378.jpg" alt="">
            <img class="img5" src="https://sjbz-fd.zol-img.com.cn/t_s320x510c5/g6/M00/0F/00/ChMkKmBJeSCIJCHpAAJQ8EX9cGwAALOSAN2L80AAlEI258.jpg" alt="">
            <img class="img6" src="https://sjbz-fd.zol-img.com.cn/t_s320x510c5/g6/M00/0F/00/ChMkKWBJeSCIX4v7AAJiZQynLZEAALOSAN88P4AAmJ9740.jpg" alt="">
        </div>
    </div>
</div>

<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var docW = document.documentElement.clientWidth;
    var dovH = document.documentElement.clientHeight;
    console.log(docW,dovH)
    canvas.width=docW;
    canvas.height=dovH;
    var arrBall=[];

    setInterval(() => {
        context.clearRect(0, 0, docW, dovH);
        for(var i=0;i<arrBall.length;i++){
            arrBall[i].update();
            if(arrBall[i]){
                arrBall[i].init();
            }
        }
    }, 20);
    function Ball(x,y,r,c,dx,dy){
        this.x=x;
        this.y=y;
        this.r=r;
        this.c=c;
        this.dx=dx;
        this.dy=dy;
        arrBall.push(this);
        this.index = arrBall.length-1;
    }
    Ball.prototype={
        init:function(){
            this.draw();
        },
        draw:function(){
            context.beginPath();
            context.arc(this.x, this.y, this.r, Math.PI*2, 0, false);
            context.fillStyle=this.c;
            context.fill();
        },
        update:function(){
            this.x-=this.dx;
            this.y-=this.dy;
            // this.r-=0.2;
            if(this.r<0){
                
                // this.remove();
            }
            if( this.x<0 || this.x>docW){
                this.dx = -this.dx;
                // this.remove();
            }
            if( this.y<10 || this.y>dovH-10){
                this.dy = -this.dy;
                // this.remove();
            }  
            for(var j=this.index;j<arrBall.length;j++){
                if(Math.abs(arrBall[j].x - this.x)<100 && Math.abs(arrBall[j].y - this.y)<100){
                    context.beginPath();
                    context.strokeStyle='#bababa';
                    context.moveTo(this.x, this.y);
                    context.lineTo(arrBall[j].x, arrBall[j].y);
                    context.closePath();
                    context.stroke();
                }
            } 
        },
        remove:function(){
           for(var i=0;i<arrBall.length;i++){
               if(arrBall[i] === this){
                    arrBall.splice(i,1);
               }
           }
        }
    }
    function getColor(){
        var r = Math.floor(Math.random()*250);
        var g = Math.floor(Math.random()*250);
        var b = Math.floor(Math.random()*250);
        var a = Math.floor(Math.random()*10)/10;
        // var arr = ["1","2","3","4","5","6","A","B","C","D","E","F"];
        // var str = "#";
        // for(var i=0;i<6;i++){
        //     str+=arr[Math.floor(Math.random()*12)];
        // }
        // var c= str;

        var c = "rgba("+r+","+g+","+b+",1)";
        var dx = Math.floor(Math.random()*10)-5;
        var dy = Math.floor(Math.random()*10)-5;
        return {
            c,dx,dy
        }
    }
    var ballLength =  200+Math.floor(Math.random()*400)
    for(var i=0;i<ballLength;i++){
        var x = Math.floor(Math.random()*docW);
        var y = Math.floor(Math.random()*dovH);
        var obj = getColor();
        new Ball(x,y,8,obj.c,obj.dx,obj.dy);
    }
    // canvas.addEventListener("mousemove",function(event){
    //     var x = event.offsetX;
    //     var y = event.offsetY;
    //     var obj = getColor();
    //     new Ball(x,y,20,obj.c,obj.dx,obj.dy);
    // })
</script>
</body>
</html>

效果图

wyystyle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-04-25canvas以及css动画轮播

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>ball</title> <style> *{ margin: 0; padding: 0; } #canvas { display: block; position:
复制链接

扫一扫

专栏目录