canvas绘制简单动画思路总结

使用canvas绘制动画原理就是不断的绘制canvas图形，当画的速度够快，看上去就能动起来。这里需要了解一下屏幕刷新率，根据效果来调整绘制的速度（1秒刷新60次 屏幕刷新率保持在60次/秒保障动画效果的流畅性）

什么是屏幕刷新率：屏幕刷新率指的是屏幕切换画面的频率，通常情况下，我们需要至少每秒24帧才能感觉画面流畅。因此，市面上绝大多数的显示设备都是60Hz左右的屏幕刷新率，这个已经足以满足大多数人的正常使用需求了。

 下面来绘制几个简单canvas动画：

鼠标点击绘制小球

<template>
    <div class="out">
        <canvas id="canvas" width="1000" height="600"></canvas>
    </div>
</template>

<script>
export default {
    mounted() {
        //产生范围随机数的函数
        function randomInt (from, to) {
            return parseInt(Math.random() * (to - from + 1) + from);
        }

        function Ball(x, y, ctx) {
            this.ctx = ctx;
            this.r=1; // 初始半径
            this.speed=0.4;
            this.x=x;
            this.y=y;

            // 随机颜色
            let R = randomInt(1, 255)
            let G = randomInt(1, 255)
            let B = randomInt(1, 255)
            let A = Math.random()
            this.color = `rgba(${R},${G},${B},${A})`
        }
        //绘制
        Ball.prototype.draw = function () {
            this.ctx.beginPath()
            this.ctx.arc(this.x, this.y, this.r, 0, Math.PI/180, true)
            this.ctx.closePath()
            this.ctx.strokeStyle = this.color;
            this.ctx.stroke();

            if(this.r>=20) return;
            this.r+=this.speed;
        }

        // 初始化
        const init = ()=>{
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext('2d');
            let W = window.innerWidth,
                H = window.innerHeight;
            canvas.width = W;
            canvas.height = H;

            // 保证canvas宽高和屏幕一致
            if (W != window.innerWidth) {
                canvas.width = W = window.innerWidth;
            }
            if (H != window.innerHeight) {
                canvas.height = H = window.innerHeight;
            }
            //定义一个数组用来盛放所有的小球"对象"
            let balls = []
            window.document.onmousedown = function (e) {
                let ball = new Ball(e.clientX, e.clientY, ctx);
                balls.push(ball)
            };
            setInterval(function () {
                //绘图之前先清空画布
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                for (let i = 0; i < balls.length; i++) {
                    balls[i].draw()
                }
            }, 1000 / 60)
        }
        init();

    },
    methods: {
        


    }
}
</script>
<style>
body{
    background-color: #000;
    overflow: hidden;
}
</style>

躁动的小球（网上找的例子）

<template>
    <div class="out">
    <canvas id="canvas" width="1000" height="600"></canvas>
</div>
</template>

<script>
export default {
    mounted() {
        //产生范围随机数的函数
        function randomInt (from, to) {
            return parseInt(Math.random() * (to - from + 1) + from);
        }

        function Ball(canvasW, canvasH, ctx) {
            this.canvasW = canvasW;
            this.canvasH = canvasH;
            this.ctx = ctx;

            // 小球水机半径，位置
            this.r = randomInt(10, 80)
            this.x = randomInt(this.r, this.canvasW - this.r)
            this.y = randomInt(this.r, this.canvasH - this.r)

            // 随机颜色
            let R = randomInt(0, 255)
            let G = randomInt(0, 255)
            let B = randomInt(0, 255)
            let A = Math.random()
            this.color = `rgba(${R},${G},${B},${A})`

            // 随机小球的速度（及方向）
            let speedX = randomInt(1, 4)
            this.speedX = randomInt(0, 100) > 50 ? speedX : -speedX
            let speedY = randomInt(1, 4)
            this.speedY = randomInt(0, 100) > 50 ? speedY : -speedY

        }
        //绘制一个小球
        Ball.prototype.draw = function () {
            let deg = Math.PI / 180
            this.ctx.beginPath()
            this.ctx.arc(this.x, this.y, this.r, 0, 360 * deg, true)
            this.ctx.closePath()
            this.ctx.fillStyle = this.color
            this.ctx.fill()
        }
        //小球移动
        Ball.prototype.ballMove = function () {
            this.x += this.speedX
            this.y += this.speedY
            
            // 撞到y轴调整x的运动方向
            if ((this.x >= this.canvasW - this.r) || (this.x <= this.r)) {
                this.speedX *= -1
            }
            // 撞到x轴调整y的运动方向
            if (this.y >= this.canvasH - this.r || this.y <= this.r) {
                this.speedY *= -1
            }
        }

        // 初始化
        const init = ()=>{
            let canvas = document.querySelector('#canvas');
            let ctx = canvas.getContext('2d');
            let ballLength = randomInt(10, 100); // 随机产生的小球个数
            //定义一个数组用来盛放所有的小球"对象"
            let balls = []
            // 循环创建多个小球
            for (let i = 0; i < ballLength; i++) {
                let ball = new Ball(canvas.width, canvas.height, ctx);
                balls.push(ball)
            }
    
            setInterval(function () {
                //绘图之前先清空画布
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                for (let i = 0; i < balls.length; i++) {
                    balls[i].ballMove();
                    balls[i].draw()
                }
            }, 30) // 1000 / 60
        }
        init();

    },
    methods: {
        


    }
}
</script>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        background-color: #333333;
    }
    .out{
        height: 600px;
        width: 1000px;
        margin: 50px auto;
        box-shadow: 2px 2px 10px #999;
    }
</style>