文档章节

HTML5 canvas save和restore方法讲解

刘梓航
 刘梓航
发布于 2016/04/14 18:00
字数 539
阅读 212
收藏 2
save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的,都没有参数。

Canvas 状态是以堆(stack)的方式保存的,每一次调用 save 方法,当前的状态就会被推入堆中保存起来。这种状态包括:当前应用的变形(即移动,旋转和缩放,见下):
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX,shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

你可以调用任意多次 save 方法。每一次调用 restore 方法,上一个保存的状态就从堆中弹出,所有设定都恢复。

举个save 和 restore 的应用例子吧。

我们尝试用这个连续矩形的例子来描述 canvas 的状态堆是如何工作的。

第一步是用默认设置画一个大四方形,然后保存一下状态。改变填充颜色画第二个小一点的白色四方形,然后再保存一下状态。再次改变填充颜色绘制更小一点的蓝色四方形。然后我们调用了restore方法将设置回到前一个save状态下的fillStyle="white",即在不设定颜色值的情况下再绘制最小的矩形时其添充色为白色。

一旦我们调用 restore,状态堆中最后的状态会弹出,并恢复所有设置。如果不是之前用 save 保存了状态,那么我们就需要手动改变设置来回到前一个状态,这个对于两三个属性的时候还是适用的,一旦多了,我们的代码将会猛涨。 简而言之restore方法就可以理解成将其对应的当前save状态下的设置全部恢复为前一个状态


代码:
<script type="text/javascript">
window.onload=function(){
 var ctx=document.getElementByIdx_x_x("canvas").getContext("2d");
 ctx.fillRect(10,10,150,150);

 ctx.save();
 ctx.fillStyle="white";
 ctx.fillRect(30,30,110,110);

 ctx.save();
 ctx.fillStyle="blue";
 ctx.fillRect(50,50,70,70);
 ctx.restore();//回到上一个状态,即 ctx.fillStyle="white";

 ctx.save();
 ctx.fillRect(70,70,30,30);//所以此处没有设定fillStyle的时候颜色为white,注意哦!如果在白色矩形后面也restore一下刚此处的fillStyle就为黑色了
 ctx.restore();
}
</script>

本文转载自:http://blog.csdn.net/fanzhang1990/article/details/21726533

刘梓航
粉丝 12
博文 57
码字总数 11448
作品 0
天津
程序员
私信 提问

暂无文章

3_数组

3_数组

行者终成事
57分钟前
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部