canvas_18 滚动的小球-小程序版

<template>
    <view>

        <!-- #ifdef APP-PLUS || H5 -->
        <canvas canvas-id="canvas" class="canvas" :change:start="animate.start" :start="startStatus"
            :data-width="canvasWidth" :data-height="canvasHeight" :style="canvasStyle"></canvas>
        <!-- #endif -->

        <!-- #ifndef APP-PLUS || H5 -->
        <canvas canvas-id="canvas" class="canvas" :style="canvasStyle"></canvas>
        <!-- #endif -->
    </view>
</template>

<script>
    // #ifndef APP-PLUS || H5
    let ctx = null,
        interval = null;

    function randNum(num) {
        return Math.random() * num;
    }

    function Ball(ctx, w, h) {
        this.ctx = ctx;
        this.w = w;
        this.h = h;
        this.x = randNum(5) + 60; // 60 防止卡住
        this.y = randNum(3) + 60;
        this.r = randNum(50) + 10; // [10, 60)
        this.xSpeed = randNum(3) + 2; // [2, 5)
        this.ySpeed = randNum(3) + 1; // [1, 4)
        // this.color = "blue";
        this.color = "rgb(" + parseInt(Math.random() * 255) +
            "," + parseInt(Math.random() * 255) +
            "," + parseInt(Math.random() * 255) + ")";
    }

    Ball.prototype.show = function() {
        // 更新球坐标
        this.run();
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        this.ctx.setFillStyle(this.color);
        this.ctx.fill();
    }

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

        if (this.y + this.r >= this.h || this.y - this.r <= 0) {
            this.ySpeed = -this.ySpeed
        }

        this.x += this.xSpeed;
        this.y += this.ySpeed;
    }

    // #endif

    export default {
        name: "zk-star",
        data() {
            return {
                title: 'canvas',
                canvasWidth: 0,
                canvasHeight: 0,
                startStatus: false,
                ballList: [],
            };
        },
        mounted: function() {
            this.$nextTick(() => {
                uni.createSelectorQuery().in(this).select(".canvas").boundingClientRect(data => {
                    // #ifdef APP-PLUS || H5
                    this.startStatus = true;
                    // #endif

                    // #ifndef APP-PLUS || H5
                    ctx = uni.createCanvasContext('canvas', this);
                    this.drawBall();
                    // #endif

                }).exec()
            })
        },
        computed: {
            canvasStyle() {
                const info = uni.getSystemInfoSync();
                this.canvasHeight = info.windowHeight;
                this.canvasWidth = info.windowWidth;
                let retStyle = "height:" + this.canvasHeight + "px;";
                retStyle += "width:" + this.canvasWidth + "px;";
                // retStyle += "background: #060e1b;";
                return retStyle;
            },
        },

        // #ifndef APP-PLUS || H5
        onUnload: function() {

        },

        methods: {
            drawBall: function() {
                let w = this.canvasWidth;
                let h = this.canvasHeight;
                var ballArr = [];
                for (var i = 0; i < 50; i++) {
                    var ball = new Ball(ctx, w, h);
                    ballArr.push(ball);
                    ball.show();
                }

                function animation() {
                    ctx.clearRect(0, 0, w, h);
                    for (var i = 0; i < ballArr.length; i++) {
                        var ball = ballArr[i];
                        ball.show();
                    }
                    ctx.draw();
                    interval = setInterval(function() {
                        animation()
                    }, 50)
                }
                animation()
            }
        }
        // #endif
    }
</script>

<script module="animate" lang="renderjs">
    function randNum(num) {
        return Math.random() * num;
    }

    function Ball(ctx, w, h) {
        this.ctx = ctx;
        this.w = w;
        this.h = h;
        this.x = randNum(5) + 60; // 60 防止卡住
        this.y = randNum(3) + 60;
        this.r = randNum(50) + 10; // [10, 60)
        this.xSpeed = randNum(3) + 2; // [2, 5)
        this.ySpeed = randNum(3) + 1; // [1, 4)
        this.color = "#" + parseInt(Math.random() * 0xffffff).toString(16);
    }

    Ball.prototype.show = function() {
        // 更新球坐标
        this.run();
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        this.ctx.fillStyle = this.color;
        this.ctx.fill();
    }

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

        if (this.y + this.r >= this.h || this.y - this.r <= 0) {
            this.ySpeed = -this.ySpeed
        }

        this.x += this.xSpeed;
        this.y += this.ySpeed;

    }

    export default {
        methods: {
            start(newVal, oldVal, owner, ins) {
                var canvas = document.querySelectorAll('.canvas>canvas')[0];
                var ctx = canvas.getContext("2d");
                let w = this.canvasWidth;
                let h = this.canvasHeight;
                var ballArr = [];
                for (var i = 0; i < 50; i++) {
                    var ball = new Ball(ctx, w, h);
                    ballArr.push(ball);
                    ball.show();
                }

                function animation() {
                    ctx.clearRect(0, 0, w, h);
                    for (var i = 0; i < ballArr.length; i++) {
                        var ball = ballArr[i];
                        ball.show();
                    }
                    requestAnimationFrame(function() {
                        animation()
                    })
                }
                animation();
            }
        }
    }
</script>

<style lang="scss">

</style>