❤ ❤canvas面向对象的随机线性小球（附源码）❤ ❤

最新推荐文章于 2024-08-14 15:45:18 发布

小兔崽啊啊啊

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量152

点赞数

文章标签： html5 javascript canvas

本文链接：https://blog.csdn.net/yingshuangtu/article/details/119986481

版权

一、❤ ❤实现效果

在这里插入图片描述

二、❤ ❤代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <canvas id="can" ></canvas>
    <script>
        var can=document.getElementById("can");
        var ctx=can.getContext('2d');
        // 画布宽高
        // var w=h=500;
        // 获取浏览器整个的宽高
        var w=document.documentElement.clientWidth-6;
        var h=document.documentElement.clientHeight-6;
        // 更新画布宽高
        can.width=w;
        can.height=h;
        // 产生随机数
        function r(num){
            return Math.random()*num;
        }
        // 1.创建小球类
        function Ball(text){
            this.x=parseInt(r(380))+60;//[60,440]
            this.y=parseInt(r(380))+60;
            this.r=parseInt(r(40))+10;//10-50
            // 随机颜色
            // this.color='#'+parseInt(Math.random()*0xffffff).toString(16);
            this.color='rgb('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')';

            // this.xSpeed=r(3)+2;//[2,5]
            // this.xSpeed=r(3)+1;//[1,4]
            this.ySpeed=parseInt(r(3))+2
            this.xSpeed=parseInt(r(3))+1;
            // 接受外部参数
            this.text=text;
        }
        
        // 画直线
        function drawLine(x1,y1,x2,y2,color){
            ctx.beginPath();
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2,y2);
            ctx.strokeStyle=color || '#000';
            ctx.stroke();
            ctx.closePath();
        }
        // 画文字
        function drawText(text,x,y){
            ctx.font='20px 微软雅黑';
            ctx.textAlign='top';
            ctx.textBaseline='middle';
            ctx.fillText(text,x,y);
            // ctx.fillStyle="#000"
        }
        // 画圆
        function drawCircle(x,y,r,color){

            ctx.beginPath();
            ctx.arc(x,y,r,0,2*Math.PI);
            ctx.fillStyle=color || '#000';
            ctx.fill()
            ctx.closePath()
        }
        Ball.prototype.show=function(){
            //在画之前先调用run
            // 更新坐标
            this.run();
            drawCircle(this.x,this.y,this.r,this.color);
            drawText(this.text,this.x+this.r,this.y);//画文字

        };
        Ball.prototype.run=function(){
            if(this.x-this.r<=0 || this.x+this.r>=w){
                this.xSpeed= -this.xSpeed;
            }
            this.x=this.x+this.xSpeed;

            if(this.y-this.r<=0 || this.y+this.r>=h){
                this.ySpeed= -this.ySpeed;
            }
            this.y=this.y+this.ySpeed;
        };
    //    用空格分割
        var titleArr='JavaScript React Angular vue1 vue2 vue3 canvas css htl bootstrap html5'.split(' ');
        var ballArr=[];//存放小球
        for(var i=0;i<10;i++){
            var ball=new Ball(titleArr[i]);
            // 小球放入数组添加show，即添加随机属性
            ballArr.push(ball);
            ball.show();
            for (var j = 0; j<i; j++) {
                // 取出当前小球的前面的小球
                var prevBall=ballArr[j];
                drawLine(ball.x,ball.y,prevBall.x,prevBall.y,ball.color);

            }
            
        }
        // 小球运动
        setInterval(function(){
            // 清除画布
            ctx.clearRect(0,0,w,h);
            for (var i = 0; i<ballArr.length; i++) {
                var ball=ballArr[i];
                ballArr[i].show()
                for (var j = 0; j<i; j++) {
                // 取出当前小球的前面的小球
                var prevBall=ballArr[j];
                drawLine(ball.x,ball.y,prevBall.x,prevBall.y,ball.color);

                }
            }
            
        },30);
       
        // new Ball().show()
    
    
    
    
    
    
    </script>
</body>
</html>

三、❤ ❤思路

小兔崽啊啊啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
❤ ❤canvas面向对象的随机线性小球（附源码）❤ ❤

一、实现效果二、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
复制链接

扫一扫