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

首先取到绘画的上下文信息var canvas=document.createElement('canvas');

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

有这两个方法

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

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

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

看下面例子,

比如给你一个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);

下面使用转换坐标系函数对画布重新定位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);

效果是这样的

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

下面使用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);

效果如下

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

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

html5 画布保存,html5 (canvas)画布save()和restore()的理解和使用方法相关推荐

canvas中save和restore的理解和使用
canvas中save和restore的理解和使用理解save和restore不一定总是成对出现的太阳系理解save和restore不一定总是成对出现的每个 canvas 的 context ...
Canvas的save和restore
在创建新的控件或修改现有的控件时,我们都会涉及到重写控件或View的onDraw方法. onDraw方法会传入一个Canvas对象,它是你用来绘制控件视觉界面的画布. 在onDraw方法里,我们经常会 ...
Tensorflow: 保存和复原模型(save and restore)
报错: is not valid checkpoint 解决: module_file = tf.train.latest_checkpoint(diag_obj.save_path) saver.r ...
html5贝塞尔曲线,用canvas绘制一个曲线动画——深入理解贝塞尔曲线
前言在前端开发中,贝赛尔曲线无处不在: 它可以用来绘制曲线,在svg和canvas中,原生提供的曲线绘制都是使用贝赛尔曲线它也可以用来描述一个缓动算法,设置css的transition-timin ...
Canvas的save和restore方法
2019独角兽企业重金招聘Python工程师标准>>> Canvas里的两个重要方法,一直很疑惑. save和restore方法是成对出现的,但是restore必然对应一个save方 ...
canvas 的save()和restore()方法
应用到画布上面的效果是可以累积的,因而就可以利用几个简单的函数来"组合"出效果来.例如,在向屏幕上绘制之前,可能会有一艘飞船需要旋转.变换和缩放.因为所有效果都对画布起作用,所以 ...
理解Canvas的save()和restore()方法
save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的,都没有参数. Canvas 状态是以堆(stack)的方式保存的,每一次调用 save ...
QPainter保存与恢复：save与restore函数浅析
在Qt中进行图像绘制,需要用到QPainter对象,这个对象可以帮助我们完成一些简单功能的绘制,比如说绘制线条,绘制折线等简单的绘制功能. QPainter对象,有两个很有意思的函数,这两个函数相互之 ...
Android画布的保存,Android canvas用法介绍之save()和restore()
一. 首先讲一下canvas的save 和 restore功能. 这是canvas很有魅力的一个部分. onDraw方法会传入一个Canvas对象,它是你用来绘制控件视觉界面的画布. 在onDraw方 ...
从0开始canvas系列一 --- canvas画布
从0开始canvas系列从0开始canvas系列一 - canvas画布从0开始canvas系列二 - 文本和图像从0开始canvas系列三 - 图像像素级操作从0开始canvas系列四 - ...

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

html5 画布保存,html5 (canvas)画布save()和restore()的理解和使用方法相关推荐

最新文章

热门文章