canvas 的save()和restore()方法

应用到画布上面的效果是可以累积的，因而就可以利用几个简单的函数来“组合”出效果来。例如，在向屏幕上绘制之前，可能会有一艘飞船需要旋转、变换和缩放。因为所有效果都对画布起作用，所以这些效果会应用到将被绘制在屏幕上的所有对象，而不仅仅是某一幅图像或某一个形状（比如一艘飞船）。

其中，save和restore函数为应用这些累积的效果提供了一种简单的机制，可以将应用了这些效果的图像或图形绘制到画布上，然后“撤销”这些改变。后台的操作是什么呢？save函数把当前的绘制状态推进栈里，而restore函数则把最后一个状态弹出栈。还拿前面提到的飞船为例，需要执行下列操作：

调用save函数（保存当前的绘制状态）
旋转、变换和缩放上下文
绘制飞船
调用restore函数，移除自上一次调用save方法以来所添加的任何效果，也就是撤销之前的变化

例子：

function draw()
{
    currentTime+=secondsBetweenFrames;
    sineWave=(Math.sin(currentTime)+1)/2;
    context.clearRect(0,0,canvas.width,canvas.height);//context的clearRect方法
    context.save();//context的save()方法
    context2D.translate(halfCanvasWidth - halfImageDemension, halfCanvasHeight - halfImageDemension);//context的translate()方法
    currentFunction();
    context.drawImage(image,0,0);//context的drawImage()方法
    context.restore();//context的restore()方法
}

在这里，我们就是要组合起来使用这两个方法。首先，在把任何效果应用到画布之前，先保存绘制状态。

context2D.save();

保存了绘制状态之后，就该应用目标效果了。为此，首先调用translate函数，从而将随后要绘制的图像在画布上居中。

context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - HALFIMAGEDIMENSION);

接下来，调用由变量currentFunction引用的函数。正是这些被引用的函数，是让图像发生alpha（透明度）变化以及缩放、旋转和切变的关键。这些函数我们稍后再介绍。

currentFunction();

为图像应用完效果之后，就可以把它绘制到画布上面了。所以，接下来就是调用drawImage来绘图。

context2D.drawImage(image, 0, 0);

最后，再调用restore函数，把自调用save函数以来应用的所有效果从画布上移除。

context2D.restore();

canvas 的save()和restore()方法相关推荐

理解Canvas的save()和restore()方法
save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的,都没有参数. Canvas 状态是以堆(stack)的方式保存的,每一次调用 save ...
Canvas的save和restore方法
2019独角兽企业重金招聘Python工程师标准>>> Canvas里的两个重要方法,一直很疑惑. save和restore方法是成对出现的,但是restore必然对应一个save方 ...
Canvas的save和restore
在创建新的控件或修改现有的控件时,我们都会涉及到重写控件或View的onDraw方法. onDraw方法会传入一个Canvas对象,它是你用来绘制控件视觉界面的画布. 在onDraw方法里,我们经常会 ...
canvas中save和restore的理解和使用
canvas中save和restore的理解和使用理解save和restore不一定总是成对出现的太阳系理解save和restore不一定总是成对出现的每个 canvas 的 context ...
Android画布的保存,Android canvas用法介绍之save()和restore()
一. 首先讲一下canvas的save 和 restore功能. 这是canvas很有魅力的一个部分. onDraw方法会传入一个Canvas对象,它是你用来绘制控件视觉界面的画布. 在onDraw方 ...
canvas像素操作、save与restore、合成与变形
一.canvas像素操作 (1)获取图像像素 (2)写入像素数据 (3)创建像素数据 (4)小案例,将canvasA画布的图像复制到canvasB中二.canvas的save与restore 三.c ...
canvas理解：一看就懂的save和restore
一看就懂的save和restore 对于save()和restore()方法,我一开始有一个错误的理解,以为每一步都save()之后restore()就等同于command + z(或者ctrl + ...
Android 中Canvas的save(),saveLayer()和restore()解析
1.save()方法 : 用来保存Canvas的状态,save()方法之后的代码,可以调用Canvas的平移.放缩.旋转.裁剪等操作! 2.restore()方法: 用来恢复Canvas之前保存的状态 ...
php画钟,canvas如何绘制钟表的方法_html5教程技巧
这篇文章主要介绍了HTML5中的canvas如何绘制钟表的方法的相关资料,小编觉得HTML真的是越来越强大的,现在分享给大家,也给大家做个参考.对HTML的小伙伴们可以一起跟随小编过来看看吧本文介绍 ...

canvas 的save()和restore()方法

canvas 的save()和restore()方法相关推荐

最新文章

热门文章