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) // 重繪頻率
    }

顯示效果