包头设计网页公司

包头设计网页公司

八、状态的保存和恢复

Saving and restoring state 是绘制复杂图形时必不可少的操作。

save() 和 restore()

save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。

Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

1、关于 save() ：Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。

一个绘画状态包括：

• 当前应用的变形（即移动，旋转和缩放）

• strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

• 当前的裁切路径（clipping path）

  
  

  可以调用任意多次 save方法(类似数组的 push())。

可以调用任意多次 save方法(类似数组的push())。

2、关于restore()：每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复(类似数组的 pop())。

var ctx;function draw(){    var canvas = document.getElementById('tutorial');    if (!canvas.getContext) return;    var ctx = canvas.getContext("2d");    ctx.fillRect(0, 0, 150, 150);   // 使用默认设置绘制一个矩形    ctx.save();                  // 保存默认状态    ctx.fillStyle = 'red'       // 在原有配置基础上对颜色做改变    ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形    ctx.save();                  // 保存当前状态    ctx.fillStyle = '#FFF'       // 再次改变颜色配置    ctx.fillRect(30, 30, 90, 90);   // 使用新的配置绘制一个矩形    ctx.restore();               // 重新加载之前的颜色状态    ctx.fillRect(45, 45, 60, 60);   // 使用上一次的配置绘制一个矩形    ctx.restore();               // 加载默认颜色配置    ctx.fillRect(60, 60, 30, 30);   // 使用加载的配置绘制一个矩形}draw();

---

九、变形

9.1 translate

translate(x, y)

ale(x, y)

我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。

scale方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩 小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。

默认情况下，canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。

9.4 transform (变形矩阵)

transform(a, b, c, d, e, f)

a (m11): Horizontal scaling.

b (m12): Horizontal skewing.

c (m21): Vertical skewing.

d (m22): Vertical scaling.

e (dx): Horizontal moving.

f (dy): Vertical moving.

var ctx;

function draw(){

    var canvas = document.getElementById('tutorial1');

    if (!canvas.getContext) return;

    var ctx = canvas.getContext("2d");

    ctx.transform(1, 1, 0, 1, 0, 0);

    ctx.fillRect(0, 0, 100, 100);

}

包头设计网页公司