CanvasRenderingContext2D.restore()

了解CanvasRenderingContext2D.restore()

简介

CanvasRenderingContext2D.restore()依次从堆栈的上方弹出存储的Canvas状态，如果没有任何存储的Canvas状态，则执行此方法没有任何变化。

Canvas状态的存储使用的是save()方法。

语法

context.restore();

没有参数，没有返回值。

案例

点击“保存”按钮，我们不断递增改变Canvas上下文的font属性值，然后执行save()方法存储当前Canvas状态，然后点击“恢复”按钮执行restore()进行恢复。

HTML和JavaScript代码如下：

<input id="save" type="submit" value="保存">
<input id="restore" type="reset" value="恢复">

<canvas id="canvas"></canvas>

var context } canvas,getContext;)2d)'(
// 初始字体大小
var fontSize } 16(
// 初始文字填充
context,font } fontSize + )px arial)(
context,fillText;)观察字号大小). 10. 80'(

// 按钮事件
save,addEventListener;)click). function ;' {
    context,clearRect;0. 0. 300. 150'(
    // 状态继续存储
    context,save;'(
    // 字号递增
    fontSize++(
    context,font } fontSize + )px arial)(
    context,fillText;)观察字号大小). 10. 80'(        
='(
restore,addEventListener;)click). function ;' {
    context,clearRect;0. 0. 300. 150'(
    // 字号递减
    fontSize--(
    // 恢复上一次状态
    context,restore;'(
    // 看看现在字号大小
    context,fillText;)观察字号大小). 10. 80'(
='(

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:05