html如何清除context,html5 – 在这个例子中Canvas.Context保存和恢复的目的是什么？...

画布状态不是画上的.它是一组属性,它们定义了用于绘制下一个事物的工具的当前状态.

画布是立即模式的位图.

像MS油漆.一旦它在那里,它在那里,所以没有意义“保存”当前的图像数据,因为这将像保存整个JPEG,每次你改变,每一帧…

…不,你保存的状态是指定你使用什么坐标方向,尺度尺度,颜色等来绘制NEXT东西的状态(以及之后的所有事情,直到你手动更改这些值).

var canvas = document.createElement("canvas"),

easel = canvas.getContext("2d");

easel.fillStyle = "rgb(80, 80, 120)";

easel.strokeStyle = "rgb(120, 120, 200)";

easel.fillRect(x, y, width, height);

easel.strokeRect(x, y, width, height);

easel.save(); // stores ALL current status properties in the stack

easel.rotate(degrees * Math.PI / 180); // radians

easel.scale(scale_X, scale_Y); // any new coordinates/dimensions will now be multiplied by these

easel.translate(new_X, new_Y); // new origin coordinates, based on rotated orientation, multiplied by the scale-factor

easel.fillStyle = "gold";

easel.fillRect(x, y, width, height); // completely new rectangle

// origin is different, and the rotation is different, because you're in a new coordinate space

easel.clearRect(0, 0, width, height); // not even guaranteed to clear the actual canvas, anymore

easel.strokeRect(width/2, height/2, width, height); // still in the new coordinate space, still with the new colour

easel.restore(); // reassign all of the previous status properties

easel.clearRect(0, 0, width, height);

假设你只是堆叠中的一个状态变化,那最后一行,现在你画布的上一个状态已被恢复,应该已经成功地清除了自己(subpixel shenanigans).

所以你可以看到,它与擦除画布非常相似.

事实上,它与擦除它无关.

它与想要绘制的东西有关,并且做基本的概述和清晰的颜色/样式,然后手动写入上面较小细节的颜色,然后手动将所有的样式写回原来的方式,回到对下一个对象的扫描笔画,并在…上

相反,保存将被重用的一般状态,为较小的细节创建一个新状态,并返回到一般状态,而无需对其进行硬编码,每次或写入setter函数以在画布上设置频繁使用的值并重新设置(重新设置缩放/旋转/仿射变换/颜色/字体/线宽/基线对齐/等).

在你的具体例子中,如果你注意了,你会看到唯一的变化就是步骤的价值.

他们为画布设置了一堆值(颜色/字体/等).

然后他们救了.那他们救了什么？

你看起来不够深他们实际上保存了默认翻译(即：原始世界空间中的origin = 0,0).

但你没有看到他们定义它？

这是因为它被定义为默认值.

他们然后增加步骤1像素(实际上,他们这样做首先,但在第一个循环之后并不重要 – 留在我这里).

然后他们设置一个新的原点为0,0(即：从现在起,当它们键入0,0时,新的起点将指向画布上完全不同的位置).

该原点等于x是画布的正中间,y等于当前步骤(即：像素1或像素2等),为什么从0开始到1之间的差异真的没有没关系).

那么他们做什么呢？

他们恢复

那么他们恢复了什么？

好吧,他们改变了什么？

他们将原点恢复到0,0

为什么？

那么,如果没有,会发生什么？

如果画布是500像素x 200像素,它从0,0开始在我们当前的屏幕空间… …那太棒了…

然后将它们翻译成width / 2,1

好的,现在当他们要求在0,0绘制文字时,他们实际上是在250,1绘制

精彩.但下次会发生什么？

现在他们正在翻译宽/ 2,2

你认为,好吧,这很好… … 0,0的绘图调用将发生在250,2,因为它们将其设置为清除数字：canvas.width / 2,2

不.因为目前的0,0实际上是250,1根据我们的屏幕.一个翻译是相对于其以前的翻译…

所以现在你正在告诉画布从当前坐标’0,0开始,然后离开250,然后向下2.

根据屏幕(这是一个窗口,看地图,而不是地图本身),我们现在是右边的500px,从我们开始的地方下降了3个像素…只有一个帧已经过去了.

因此,在设置新地图之前,将地图的坐标恢复为与屏幕坐标相同的原点(以及旋转相同,以及缩放和偏斜等).

正如你可能会猜到的,现在看来,你可以看到文本应该从上到下移动.不正确的左边,像页面说…

为什么这样做

为什么要改变绘图上下文的坐标系的麻烦,当绘制命令给你一个x和y在那里的功能？

如果你想在画布上画一幅画,你知道它的高低是多大,以及你想要左上角的位置,为什么你不能这么做呢？

easel.drawImage(myImg, x, y, myImg.width, myImg.height);

嗯,你可以

你可以完全这样做没有什么阻止你

事实上,如果你想让它在屏幕上放大,你可以只是更新一个定时器上的x和y,并称之为一天.

但是,如果你画一个游戏角色呢？如果人物有帽子,手套和大靴子,所有这些东西都是从角色中分离出来的呢？

所以首先你会说“好吧,他站在x和y在世界上,所以x加上他的手与他的身体相关的是x body.x – hand.x …或者是那个加号“.

…现在你已经看到所有的部件都看起来像一个充满5年级数学作业的笔记本电脑.

相反,你可以说：“他在这里,设定我的坐标,以便0,0在我的家伙的中间”.现在你的画面调用就像“我的右手在身体右边6像素,左手是左边3像素”一样简单.

当您完成绘制角色时,您可以将原点设置为0,0,然后可以绘制下一个字符.或者,如果你想尝试,你可以从那里翻译成下一个字符的起源,基于从一个到另一个的增量(这将为每个翻译节省一个函数调用).然后,如果你只保存状态一次(原始状态),最后可以通过调用.restore返回到0,0.