canvas 面向对象小球

利用canvas 绘制多个小球,在屏幕中滚动,遇到边框反弹
canvas 面向对象小球_第1张图片

<!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>
        #canvas {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <canvas id="canvas" height="500px" width="500px"> </canvas>
</body>

<script>
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext("2d")
    var x = 100
    var y = 100;
    var r = 30;
    var w = h = 500;

    function rs(num) {
        return Math.random() * num;
    }
    //小球对象
    function Ball() {
        this.x = rs(5)+60;
        this.y = rs(3)+60;
        this.r = rs(50) + 10 // [10,60]
        this.color = "#" + parseInt(Math.random() * 0xffffff).toString(16)
        this.xSpeed = rs(3) + 2 // [2,5]
        this.ySpeed = rs(3) + 1

    }
    // 定义小球显示方法
    Ball.prototype.show = function () {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
        ctx.fillStyle = this.color
        // ctx.stroke()
        ctx.fill()
    }

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

    var ballArr = []
    for (let index = 0; index < 11; index++) { // 11 为小球数量
        var ball = new Ball()
        ball.show()
        ballArr.push(ball)
    }

    setInterval(function () {
        ctx.clearRect(0, 0, w, h);//清除画布
        for (let index = 0; index < ballArr.length; index++) {
            var ball = ballArr[index];
            ball.run()
            ball.show()
        }
    }, 10)
</script>
</html>

线性小球
canvas 面向对象小球_第2张图片

<!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>
        #canvas {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <canvas id="canvas" height="500px" width="500px"> </canvas>
</body>

<script>
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext("2d")
    var x = 100
    var y = 100;
    var r = 30;
    var w = h = 500;

    function rs(num) {
        return Math.random() * num;
    }
    //小球对象
    function Ball(text) {
        this.x = rs(380) + 60;//[60-440]
        this.y = rs(380) + 60;
        this.r = rs(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)+")";
      console.log(this.color) 
      this.xSpeed = rs(3) + 2 // [2,5]
        this.ySpeed = rs(3) + 1
        this.text = text

    }
    // 定义小球显示方法
    Ball.prototype.show = function () {
        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;
        }
        if (this.y - this.r <= 0 || this.y + this.r >= h) {
            this.ySpeed = -this.ySpeed;
        }
        this.x = this.x + this.xSpeed
        this.y = this.y + this.ySpeed
    }
    var titleArr = "javaScript HTML5 JAVA PHP JQuery Canvas CSS3 Bootstrap Node.js React".split(" ");
    var ballArr = []
    for (let index = 0; index < titleArr.length; index++) { //  为小球数量
        var ball = new Ball(titleArr[index])
        ball.show()
        ballArr.push(ball)

        // 小球连线计算
        for (let j = 0; j < index; 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 (let index = 0; index < ballArr.length; index++) {
            var ball = ballArr[index];

            ball.show()
            // 小球连线计算
            for (let j = 0; j < index; j++) {
                // 取出当前小球前面的小球
                var prevBall = ballArr[j]
                drawLine(ball.x, ball.y, prevBall.x, prevBall.y,ball.color)
            }
        }

    }, 10)


    // 直线
    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'//'center'
        ctx.textBaseLine = "middle"
        ctx.fillText(text, x, y)
    }

    //画球
    function drawCircle(x, y, r, color) {
        ctx.beginPath()
        ctx.arc(x, y, r, 0, Math.PI * 2)
        ctx.fillStyle = color || "#000"
        ctx.fill()
    }
</script>
</html>

你可能感兴趣的:(h5,js,javascript,前端,开发语言)