canvas简单的画布动画 - Kaiqisan

canvas简单的画布动画

本质

高频率地清除画布，然后再绘制新的图片，使之看起来就像一个动画。

关键代码

fillRect(): 看似是绘制矩形，实则是利用了它的方法和画布是矩形这两个特性来进行画布的清除，清除上一次的全部内容以便于下一次的绘制。

源代码

    window.onload = () => {
        let canvas = document.getElementById('demo')
        let ctx = canvas.getContext('2d')
        let flag = 1 // 每一帧旋转角度（每重绘一次算一帧）
        let a = 1 // 放大比例
        let status = true // 判断当前需要增大图像尺寸还是缩小图像尺寸
        ctx.translate(500, 300) // 把坐标中心移动到画布中心，这里的画布长1000px，宽600px
        let color = false // 决定内容是白底黑线还是黑底白线

        let time = setInterval(() => {
            ctx.fillStyle = color === true ? "#fff" : "#000"
            ctx.fillRect(-500, -300, canvas.width, canvas.height)

            // 判断当前需要增大图像还是缩小图像
            if (status === true) {
                a = a + 0.01
            } else {
                a = a - 0.01
            }
            
            ctx.rotate(flag * Math.PI / 180)
            // 绘制部分
            ctx.strokeStyle = color === false ? "#fff" : "#000"
            ctx.strokeRect(-100 * a , -100 * a, 200 * a, 200 * a)
            ctx.beginPath()
            ctx.strokeStyle = color === false ? "#fff" : "#000"
            ctx.moveTo(0, 0)
            ctx.lineTo(100, 100)
            ctx.stroke()
            ctx.beginPath()
            ctx.strokeStyle = color === false ? "#fff" : "#000"
            ctx.moveTo(0, 0)
            ctx.lineTo(-100, 100)
            ctx.stroke()
            
            // 判断是否达到最大的尺寸
            if (a > 2) {
                status = false
            } else if (a < 1) {
                status = true
            }
            
            // color = !color // 辣眼睛就注释了
        }, 12) // 重绘频率
    }

显示效果