html5 (canvas)画布save()和restore()的理解和使用方法

来源:赵克立 分类: HTML5 标签:canvasHTML5发布时间:2016-11-29 16:36:56浏览:979
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2016-12-07 16:33:19

首先取到绘画的上下文信息

var canvas=document.createElement('canvas');
var context=canvas.getContext('2d');

有这两个方法

context.save();//保存当前画布状态

context.restore()//恢复最近一近的画布保存状态

主要是当对画布有如下转换操作之前可以先使用context.save();保存画布当前状态,方便下面的图画好后需要恢复画布原来的状态时调用context.restore(); 

blob.png

看下面例子,

比如给你一个A4纸大小的画板

让你先在最上面画三个小正方形如下代码

context.fillStyle='#f00';
context.fillRect(0,0,30,30);
context.fillStyle='#0F0';
context.fillRect(35,0,30,30);
context.fillStyle='#00f';
context.fillRect(75,0,30,30);

blob.png

下面使用转换坐标系函数对画布重新定位0,0坐标点

context.fillStyle='#f00';
context.fillRect(0,0,30,30);
//这里重新把30,30定为坐标系原点
context.translate(30,30)
context.fillStyle='#0F0';
context.fillRect(35,0,30,30);
context.fillStyle='#00f';
context.fillRect(75,0,30,30);

效果是这样的

blob.png

第三个图形也使用转换过后的坐标系画图啦


下面使用context.save()context.restore();

context.fillStyle='#f00';
context.fillRect(0,0,30,30);
//变换坐标系之前先保存画布状态
context.save();
//这里重新把30,30定为坐标系原点
context.translate(30,30)
context.fillStyle='#0F0';
context.fillRect(35,0,30,30);
//恢复画布之前状态再画
context.restore();
context.fillStyle='#00f';
context.fillRect(75,0,30,30);

效果如下

blob.png

画第三个图形时恢复啦画完第一个图形后的坐标系

第三个图片还是按原来的坐标去画图啦


微信号:kelicom QQ交流群:215861553
点击更换验证码
留言