canvas保存画笔的状态到栈里面

柔情只为你懂 2024-02-21 10:39 39阅读 0赞

可以将画笔不同时刻的状态记录下来，然后保存到一个栈里面存储，后面可以在栈里面恢复画笔的状态，继续使用之前的状态绘制，效果如下：将红色，蓝色，黄色的状态都存储起来了，然后逐个恢复状态，就可以画出黄色，蓝色。红色的矩形：

![902fd71169db41108cf20bc206510b13.png][]

源代码：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>保存和恢复画笔状态</title>
        </head>
        <body>
            <div>保存和恢复画笔状态</div>
            <canvas id="canvas" width="800" height="800"></canvas>
            <script>
                // 获取画笔
                const canvas = document.getElementById('canvas')
                const context = canvas.getContext('2d')
    
                // 画一个红色的矩形
                context.fillStyle = 'red'
                context.fillRect(0, 0, 100, 100)
                // 保存画笔状态
                context.save()
    
                // 画一个蓝色的矩形
                context.fillStyle = 'blue'
                context.fillRect(100, 100, 100, 100)
                // 保存画笔状态
                context.save()
    
                // 画一个黄色的矩形
                context.fillStyle = 'yellow'
                context.fillRect(200, 200, 100, 100)
                context.save()
    
                // 恢复画笔的状态:此时就会再使用黄色画笔绘制一个矩形出来
                context.restore()
                context.fillRect(300, 300, 100, 100)
    
                // 恢复画笔的状态:此时会再使用蓝色的画笔绘制一个矩形出来
                context.restore()
                context.fillRect(400, 400, 100, 100)
            </script>
        </body>
    </html>

[902fd71169db41108cf20bc206510b13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/8ae9c1127e074057bcb1b7adaba2e78c.png