canvas_30 动画-滚动的方块

<template>
    <view class="zcvs">
        <canvas canvas-id="cvs" id="cvs" :style="setCanvasStyle" />
    </view>
</template>

<script>
    export default {
        data() {
            return {};
        },
        onReady() {
            this.drawCvs();
        },
        computed: {
            setCanvasStyle() {
                let retStyle = "background: #000;";
                const info = uni.getSystemInfoSync();
                retStyle += "" + info.windowWidth + "px;";
                retStyle += "height:" + info.windowHeight + "px;";
                return retStyle;
            }
        },
        methods: {
            drawCvs() {
                const ctx = uni.createCanvasContext('cvs');

                const info = uni.getSystemInfoSync();
                const canvas = {
                     info.windowWidth,
                    height: info.windowHeight
                };

                let [dX, dY, sX, sY, speed] = [true, true, 0, 0, 2];

                var animate = (sx, sy) => {
                    ctx.fillRect(sx, sy, 20, 20);
                    ctx.stroke();
                    ctx.draw();
                };

                var start = () => {
                    ctx.setFillStyle("#d6b816");
                    ctx.setStrokeStyle("#007AFF");
                    ctx.setLineWidth(10);

                    if (dX && dY) {
                        sX < canvas.width - 20 ? sX += speed : dX = false
                        sY < canvas.height - 20 ? sY += speed : dY = false
                    } else if (!dX && dY) {
                        sX > 0 ? sX -= speed : dX = true
                        sY < canvas.height - 20 ? sY += speed : dY = false
                    } else if (dX && !dY) {
                        sX < canvas.width - 20 ? sX += speed : dX = false
                        sY > 0 ? sY -= speed : dY = true
                    } else if (!dX && !dY) {
                        sX > 0 ? sX -= speed : dX = true
                        sY > 0 ? sY -= speed : dY = true
                    }

                    animate(sX, sY);
                    window.requestAnimationFrame(start);
                };

                start();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .zcvs {
        flex: 1;
        background: "#000";
    }
</style>