HTML5画布转换状态栈教程

来源：互联网发布：程序员的算法趣题pdf 编辑：程序博客网时间：2024/06/10 14:06

保存和恢复不同转换状态与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>

0 0