Canvas中保存画布状态及还原

最新推荐文章于 2023-06-07 17:18:47 发布

落花新月

最新推荐文章于 2023-06-07 17:18:47 发布

阅读量6.5k

点赞数 5

分类专栏： Canvas 文章标签：前端 Canvas Canvas的状态保存与还原 save restore

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/51192200

版权

Canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.save();

restore();

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form测试</title>
    <style type="text/css">
        #can{
            background: pink;
        }
    </style>
</head>
<body>
  <canvas id="can" width="800px" height="600pxf"></canvas>
  <script type="text/javascript">
      var canvas=document.getElementById("can");
      var ctx=canvas.getContext("2d");
//      三角形
      ctx.beginPath();
      ctx.moveTo(100,50);
      ctx.lineTo(40,80);
      ctx.lineTo(120,100);
      ctx.closePath();
      ctx.lineWidth=10;
      ctx.fillStyle='yellow';
      ctx.strokeStyle="blue";
      ctx.fill();
      ctx.stroke();
//      圆
      ctx.beginPath();
      ctx.arc(300,300,100,30,270,false);
      ctx.closePath();
      ctx.fill();
//      矩形
      ctx.fillRect(500,300,100,100);

      ctx.fillStyle = "rgba(255,0,0,1)";    //给定画笔颜色
      ctx.save();    //保存颜色
      ctx.beginPath();
      ctx.rect(300,300,110,110);
      ctx.fill();
      //新设置一下画笔并作画
      ctx.fillStyle = '#0f0';
      ctx.save();
      ctx.fillRect(300,400,111,111);
      ctx.fillStyle = 'blue';
      //还原到上次储存的地方
      ctx.restore();
      ctx.restore();
      ctx.fillRect(300,500,111,111);   //再次绘制矩形，颜色为restore后的颜色


  </script>
</body>
</html>

注意：save()和restore()操作可以多次使用，但是每一次restore只能还原到距离最近的一次，也就是后保存的先还原。

运行效果：

落花新月

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Canvas中保存画布状态及还原

1.save(); restore();示例代码：html>lang="en"> charset="UTF-8"> form测试 type="text/css"> #can{ background: pink; } id="can" width="800px" height="60
复制链接

扫一扫