了解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'(
    ='(

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.canvas'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2019-10-18 01:44:05