Canvas--save&restore

最新推荐文章于 2024-07-22 17:27:18 发布

cxixi0222

最新推荐文章于 2024-07-22 17:27:18 发布

阅读量146

点赞数

分类专栏： html5 canvas 文章标签： canvas html5

本文链接：https://blog.csdn.net/cxixi0222/article/details/104798341

版权

html5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

save() :用来保存canvas的状态，save后可进行平移等操作。入栈
restore():用来恢复canvas之前保存的状态，防止save之后的操作对后续绘制有影响。出栈

出栈的次数不能多于入栈的次数，故程序中restore()方法调用的次数不应该比save()方法多
save()和restore()方法要一起使用才会有效果

<body>
    <canvas id="canvas" width="300" height="300" style="border:1px dashed gray;"></canvas>
</body>
<script type="text/javascript">
    window.onload = function () {
        var canvas = document.querySelector("#canvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            ctx.save();
            ctx.fillStyle = "pink";
            ctx.save();
            ctx.fillStyle = "deeppink";
            ctx.fillStyle = "blue";
            ctx.save();
            ctx.fillStyle = "red";
            ctx.save();
            ctx.fillStyle = "green";
            ctx.save();
            ctx.beginPath();

            ctx.restore();
            ctx.restore();
            ctx.restore();
            ctx.restore();
            ctx.fillRect(50, 50, 100, 100);
        }
    }   
</script>

根据上述代码，画图如下帮助理解
在这里插入图片描述
代码运行结果显示如下：

cxixi0222

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas--save&restore

save() :用来保存canvas的状态，save后可进行平移等操作。入栈restore():用来恢复canvas之前保存的状态，防止save之后的操作对后续绘制有影响。出栈出栈的次数不能多于入栈的次数，故程序中restore()方法调用的次数不应该比save()方法多save()和restore()方法要一起使用才会有效果<body> <canvas id="...
复制链接

扫一扫

专栏目录