HTML5CANVAS：绘图状态和状态栈

来源：动视网责编：小采时间：2020-11-27 15:16:55

HTML5CANVAS：绘图状态和状态栈

HTML5CANVAS：绘图状态和状态栈:HTML5 CANVAS：绘图状态和状态栈当我们在HTML5 canvas中使用2D上下文来绘制图形的时候，2D上下文会处于某种状态中。你可以通过操纵2D上下文的属性来设置这些状态，例如fillStyle属性和strokeStyle属性。所有的这些操作被称为2D上下文的state(状态)

推荐度：

点击下载本文 文档为doc格式

导读HTML5CANVAS：绘图状态和状态栈:HTML5 CANVAS：绘图状态和状态栈当我们在HTML5 canvas中使用2D上下文来绘制图形的时候，2D上下文会处于某种状态中。你可以通过操纵2D上下文的属性来设置这些状态，例如fillStyle属性和strokeStyle属性。所有的这些操作被称为2D上下文的state(状态)

HTML5 CANVAS：绘图状态和状态栈

　　当我们在HTML5 canvas中使用2D上下文来绘制图形的时候，2D上下文会处于某种状态中。你可以通过操纵2D上下文的属性来设置这些状态，例如fillStyle属性和strokeStyle属性。所有的这些操作被称为2D上下文的state(状态)。

　　有时候，我们在canvas上绘制图形的时候，经常需要改变2D上下文的状态。举例来说，你在绘制直线或矩形的时候需要一种strokStyle，在绘制下一条直线或矩形的时候需要另一种strokStyle。又或者是不同的填充色，旋转角度等等。

　　我们不可能在绘制图形之前就设置好所有图形的状态，但是我们可以将当前的状态压栈到一个状态栈中。在这个状态栈中，最后压入的状态将最先被弹出。通过这种方式我们可以非常方便的恢复到前一次的绘图状态。

　　HTML5 CANVAS绘图状态的例子
　　将一个绘图状态进行压栈和出栈的方法如下：

context.save(); // 将一个状态压入状态栈中
 
context.restore(); // 将最前面的状态出栈，并设置到2d上下文中

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle ="#66ff66";
context.strokeStyle="#990000";
context.lineWidth = 5;
context.fillRect (5, 5, 50, 50);
context.strokeRect(5, 5, 50, 50);
context.save();
context.fillStyle = "#6666ff";
context.fillRect (65, 5, 50, 50);
context.strokeRect(65, 5, 50, 50);
context.save();
context.strokeStyle = "#000099";
context.fillRect (125, 5, 50, 50);
context.strokeRect(125, 5, 50, 50);
context.restore();
context.fillRect (185, 5, 50, 50);
context.strokeRect(185, 5, 50, 50);
context.restore();
context.fillRect (245, 5, 50, 50);
context.strokeRect(245, 5, 50, 50);