HTML5画布转换状态栈教程

最新推荐文章于 2023-01-12 14:12:39 发布

limeiyans

最新推荐文章于 2023-01-12 14:12:39 发布

阅读量661

点赞数

分类专栏： HTML5画布转换状态栈教程文章标签： HTML5画布转换状态栈教程

本文链接：https://blog.csdn.net/limeiyans/article/details/18403121

版权

HTML5画布转换状态栈教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

保存和恢复不同转换状态与HTML5画布,我们可以使用save()和restore()画布的背景。

在本教程中,我们将保存转换状态通过推到州堆栈前立即转换。我们会画一个蓝色的矩形,恢复和流行最后转换状态,画一个红色的长方形,恢复和流行最后转换状态,画一个黄色的长方形,然后终于恢复和流行的最终转换状态,画一个绿色的矩形。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var rectWidth = 150;
      var rectHeight = 75;

      context.save();
      // save state 1
      context.translate(canvas.width / 2, canvas.height / 2);

      context.save();
      // save state 2
      context.rotate(Math.PI / 4);

      context.save();
      // save state 3
      context.scale(2, 2);

      context.fillStyle = 'blue';
      context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

      context.restore();
      // restore state 3
      context.fillStyle = 'red';
      context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

      context.restore();
      // restore state 2
      context.fillStyle = 'yellow';
      context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

      context.restore();
      // restore state 1
      context.fillStyle = 'green';
      context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);


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