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

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

源代码：


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>

相关阅读:
期货十三篇第四篇开仓篇
每日一题：对比Vector、ArrayList、LinkedList有何区别❓
基于Java+vue前后端分离小型超市管理系统设计实现(源码+lw+部署文档+讲解等)
小表join顺序和广播问题
Py之interpret：interpret的简介、安装、案例应用之详细攻略
Vue3：自定义图标选择器（包含 SVG 图标封装）
温敏传感器概述
Intel® Hyper-Threading Technolog 超线程技术
UVM知识点5
linux进程间通信之信号

原文地址：https://blog.csdn.net/weixin_44786530/article/details/133976177