HTML5 Canvas 提供了 save
和 restore
方法用来绘制复杂图形。
它可以保存 canvas 的状态,包括 canvas 的平移、放缩、旋转、错切、裁剪等操作等等,也可以恢复到上次保存的状态。
相关方法:
// 保存当前环境的状态
context.save()
// 返回之前保存过的路径状态和属性
context.restore()
canvas 的状态存储在内存中,它的数据结构类似于栈
,即符合“先入后出,后入先出”的基本特点。
通过调用 save 方法相当于生成一个当前 Canvas 状态的快照,它将快照保存在快照池中,可任意多次调用,相当于压栈 push
操作。
而调用 restore 方法相当于从快照池中取出一个已保存的 Canvas 状态,然后恢复在画布之上,也可以任意多次调用,相当于弹栈 pop
操作。
状态包括
- 变形,即移动,旋转和缩放 (transformation matrix)
- 裁剪区域 (clipping region)
- 虚线参数 (dash list)
- 以下属性的值:
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled
例如:
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
// 默认黑色
ctx.fillRect(0, 0, 50, 50);
// 保存默认状态
ctx.save();
// 设置绿色
ctx.fillStyle = 'green';
ctx.fillRect(50, 50, 50, 50);
// 保存绿色
ctx.save();
// 设置红色
ctx.fillStyle = 'red';
// 恢复到设置绿色
ctx.restore();
ctx.fillRect(100, 100, 50, 50);
// 恢复到默认黑色
ctx.restore();
ctx.fillRect(150, 150, 50, 50);