使用类似的方法将第三个状态添加到Canvas的堆栈中：

ctx.fillStyle = '#A7DBD7'; ctx.shadowOffsetX = 15; ctx.shadowOffsetY = 15; ctx.shadowBlur = 4; ctx.shadowColor = 'rgba(204, 204, 204, 0.5)'; ctx.fillRect(110,10,45,150); ctx.save(); // 将第三个状态推到堆栈中

现在通过 restore() 取出绘图堆栈中保存的状态，也就是设置矩形的填充色和阴影效果的属性。然后将这个保存的状态用到一个圆上面。将画出的圆，除了形状不一样之外，其他的图形样式都将一样：

ctx.restore(); // 取出堆栈3（第三个状态） ctx.beginPath(); ctx.arc(225, 75, 22, 0, Math.PI*2, true); ctx.closePath(); ctx.fill();

这个圆取出了绘图堆栈中最顶上（最后）一个状态。再次使用 restore() 将第二个状态用于到另一个圆上：

ctx.restore(); // 取出堆栈2（第二个状态） ctx.beginPath(); ctx.arc(320, 75, 15, 0, Math.PI*2, true); ctx.closePath(); ctx.fill();

使用类似的方法将第一个状态用到另一个圆上：

ctx.restore(); // 取出堆栈1（第一个状态） ctx.beginPath(); ctx.arc(400, 75, 8, 0, Math.PI*2, true); ctx.closePath(); ctx.fill();

看到这里，是不是对Canvas中的 save() 和 restore() 有了一个较清晰的认知了。

实例：制作一个扇形

在实际使用当中， save() 和 restore() 还是非常广泛的，特别是涉及到坐标系统的变换和图形变换方面。最后通过一个简单的示例，让大家体验一下：

// ctx: Canvas绘图环境 // x,y: 位移目标点 // r: 圆弧半径 // sDeg: 旋转起始角度 // eDeg: 旋转终点角度 function drawSector(ctx, x, y,r, sDeg, eDeg) { // 初始保存 ctx.save(); //位移到目标点 ctx.translate(x, y); ctx.beginPath(); // 画出圆弧 ctx.arc(0, 0, r, sDeg, eDeg); // 再次保存以备旋转 ctx.save(); // 旋转至起始角度 ctx.rotate(eDeg); // 移动到终点，准备连接终点与圆心 ctx.moveTo(r, 0); // 连接到圆心 ctx.lineTo(0, 0); // 还原 ctx.restore(); // 旋转至起点角度 ctx.rotate(sDeg); // 从圆心连接到起点 ctx.lineTo(r, 0); ctx.closePath(); // 还原到最初保存的状态 ctx.restore(); }

然后调用这个封装的函数：

function drawScreen () { var deg = Math.PI / 180; var obj = { x: 300, y: 150, r: 80, sDeg: [30, 111, 190, 233, 280, 345], eDeg: [111, 190, 233, 280, 345, 30], style: ['#f00', '#0f0', '#00f', '#789', '#abcdef'] } for (var i = 0; i < obj.sDeg.length; i++) { drawSector(ctx,obj.x, obj.y, obj.r, obj.sDeg[i] * deg, obj.eDeg[i] * deg); ctx.fill(); ctx.fillStyle = obj.style[i]; } }

最后你能看到的扇形效果如下：

总结

这篇文章主要介绍了Canvas中的 save() 和 restore() 方法。其中 save() 方法会将Canvas的状态推到Canvas绘图的堆栈中，然后通过 restore() 方法从Canvas绘图的堆栈中取出 save() 保存的状态。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对html5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。

本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: CSS、CSS3、HTML5、HTML、矩形、数据、其实、核心技术、

分页：12

转载请注明
本文标题：Canvas学习：save()和restore()
本站链接：
分享请点击：

1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。

登录后可拥有收藏文章、关注作者等权限...

   注册     登录