理解Canvas的save()和restore()方法

最新推荐文章于 2024-01-04 18:24:16 发布

画一生情入颜容

最新推荐文章于 2024-01-04 18:24:16 发布

阅读量1.1k

点赞数 1

文章标签： canvas

本文链接：https://blog.csdn.net/csdn_zsdf/article/details/65633460

版权

❑ save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
❑ restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error

通俗地讲，canvas中的context.save()就是保存之前的画布状态，然后相当于在一块新画布上进行操作，不用担心影响save()之前的画布。
在经过restore()方法之后，就相当于还原了画布，如果之前经历过一次save，那么这时候restore()就相当于把两个画布合并了。前两个画布的内容就相当于处在同一个环境上了。再进行save()的话，就相当于把前两次的画布内容保存，重新又在一块画布上进行绘画。。。
可以通过以下代码来更清楚的理解这两个方法：

 <!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
    <title>canvas的save和restore</title>
    <script type="text/javascript">

    window.onload = function(){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //创建一个画矩形的方法
    function drawRect(context,color){
        context.fillStyle = color;
        context.fillRect(0,0,100,30);
    }

    //创建一个旋转的函数
    function rotatDeg(context,deg){
        var rad = deg*Math.PI/180;
        context.rotate(rad);
    }

    //绘制普通的矩形
    drawRect(ctx,"red");

    //指定移动，旋转后绘图
    ctx.save();             //保存前面绘制的矩形状态
    ctx.translate(100,30);  //将画布的坐标原点移到(100,30)处
    rotatDeg(ctx,45);       //进行旋转
    drawRect(ctx,"blue");   //绘制矩形
    ctx.restore();          //恢复状态

    //指定移动，旋转后绘图
    ctx.save();               // 保存前面的状态
    ctx.translate(200,50);    //移动基点，将画布的中心移到坐标(200,50)处
    rotatDeg(ctx,90);         //旋转90度
    drawRect(ctx,"green");    //绘制矩形
    ctx.restore();            //恢复状态
}
    </script>
</head>
<body>
<canvas id = "canvas" style = "width:300px ;height:300px"></canvas>
</body>
</html>

效果图如下
这里写图片描述

canvas的左上角为坐标原点。在画第一个红色的矩形时，由于没有调整基点的位置，所以就在（0，0）也就是canvas画布的左上角位置绘出了一个长为100，宽为30的红色矩形。
然后绘制第二个蓝色的矩形时进行了一次save().对上一个红色的画布环境进行了保存。此时通过ctx.translate(100,30); 将画布的坐标原点移到了(100,30)处，即(100,30)在当前环境中就相当于（0，0）点。然后调用画矩形的函数drawRect(ctx,”blue”)，因为在函数drawRect中，绘制矩形是以（0，0）为原点，绘制的旋转45度的矩形，然后restore()恢复最初的画布环境。
第三个矩形时，对前面的环境又进行了save。然后通过将画布的坐标原点移到（200，50）处，旋转90度，再绘制绿色的矩形。完成后恢复最初的画布环境。
如果不用save和restore会是什么样的效果图？

//绘制第一个矩形
drawRect(ctx,”red”);

//指定移动，旋转后绘图        
ctx.translate(100,30);  //将画布的坐标原点移到(100,30)处
rotatDeg(ctx,45);       //进行旋转
drawRect(ctx,"blue");   //绘制矩形

//指定移动，旋转后绘图
ctx.translate(200,50);  
//移动画布的原点，原点不是移动到了（200，50）处，而是相对于点 （100，30）（因为此时这个点才是画布的原点），向右移动了200像素，向下移动了50像素，就相当于移出了画布外
rotatDeg(ctx,90);         //旋转90度
drawRect(ctx,"green");    //绘制矩形

}
这里写图片描述
效果图是这样。为什么绿色的矩形不见了？
因为在画第二个图形时，没有保存第一个画布的环境，而直接将画布的原点移动到了（100，30）处。再绘制第三个图形时，将坐标原点不是移动到了（200，50）处，而是相对于点（100，30）（因为此时这个点才是画布的原点），向右移动了200像素，向下移动了50像素，就相当于移出了画布外，所以看不到。

画一生情入颜容

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
理解Canvas的save()和restore()方法

❑ save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 ❑ restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。 save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error通俗地讲，canvas中的
复制链接

扫一扫