随着HTML5画布使用状态栈诱导式的范围

最新推荐文章于 2022-12-18 13:08:19 发布

luoxujuns

最新推荐文章于 2022-12-18 13:08:19 发布

阅读量686

点赞数

分类专栏：最近学习html5遇到的问题文章标签： HTML5画布使用状态栈诱导式最近学习的html5代码

最近学习html5遇到的问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用HTML5画布的时候，我们经常用帆布上下文对象的相互作用，其中蕴涵着丰富的造型酷炫的性质和绘制方法。对于一个典型的代码块的东西，吸引到画布上，我们画一个路径，设置一些上下文属性风格无论我们绘制，然后使用方法如fill()和stroke()真正绘制在画布上的东西。很容易。对的？

但如果我们创造大发生的，复杂的帆布的应用，我们的方法和功能，画的东西到画布上，可以以任何顺序执行很多？我们当然不希望我们的代码库的方式从泄漏到代码的其他部分的不同部分。这里的一个例子：

<!DOCTYPE HTML>
<html>
  <canvas id="myCanvas" width="580" height="200"></canvas>
  <script>
    function drawTransparentSquare(context) {
      context.fillStyle = 'red';
      context.globalAlpha = 0.5;
      context.fillRect(100, 20, 100, 100);
      
    }
    
    function drawSquare(context) {
      context.fillStyle = 'red';
      context.fillRect(300, 50, 120, 120);
    }

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    
    drawTransparentSquare(context);
    drawSquare(context);
  </script>
</html>

正如你所看到的，我们称drawtransparentsquare()随后drawsquare()。由于对象可以通过参考在JavaScript中修改，当第一个函数集的Alpha属性设置为0.5，风格泄露到下一个函数调用和第二方透明就好了。这显然不是预期的结果。

所以我们能做些什么呢？应我们的每个方法和功能复位上下文风格像每个CSS重置功能？虽然这可以通过所有的样式属性创建一个resetstyles()功能回路是可以实现的将它们设置为它们的默认值，这似乎是一个不断重置所有样式属性的每一次函数调用是有点奇怪。有没有更好的方法？

风格范围感应

风格范围是指造型里面的代码块的范围，类似于变量作用域内的代码块的概念。当编写JavaScript代码，例如，分裂成一系列的模块化代码库的方法和功能很好的做法，这样的变量在每个函数创建的作用域只对特定的功能，不可在它的外面。这就是所谓的变量范围感应。我们这里需要的，是一种诱导式的范围内的功能，或任何其他代码块，在这样一种方式，方式应用于上下文不泄漏到其它功能或代码块。

HTML5的canvas的状态栈：在粗糙的钻石

其中一个最强大的，或许是最被忽视的功能的HTML5画布，是状态栈。状态栈存储快照风格和转换中的堆栈的数据结构通过Canvas语境save()方法。更重要的是，我们还可以使用状态栈与restore()方法恢复的风格和转换的快照。

那么我们如何使用状态栈诱导式的范围？如果我们在一个函数定义的开始使用save()方法，我们可以节省在状态栈画布上下文的状态。一旦保存的状态，我们可以运用一些上下文的风格，画的东西，然后恢复状态栈回用restore()方法的初始状态。中提琴，我们刚刚引起的风格的范围。

风格范围感应的例子

所以我们现在使用的状态栈解决前面的代码示例通过诱导式的范围为每个函数：

<!DOCTYPE HTML>
<html>
  <canvas id="myCanvas" width="580" height="200"></canvas>
  <script>
    function drawTransparentSquare(context) {
      context.save();
      context.fillStyle = 'red';
      context.globalAlpha = 0.5;
      context.fillRect(100, 20, 100, 100);
      context.restore();
    }
    
    function drawSquare(context) {
      context.save();
      context.fillStyle = 'red';
      context.fillRect(300, 50, 120, 120);
      context.restore();
    }

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    
    drawTransparentSquare(context);
    drawSquare(context);
  </script>
</html>