javascript - 当使用 "destination-in,"时，只有最后绘制的东西似乎会渲染

Question

我正在制作一个小库，使用位图字体在 Javascript 中模拟类似诅咒的界面。字体是包含所有字符的 png，并且背景透明。

我用来渲染 Angular 色的方法如下。

1. 在 Angular 色要去的地方画一个正方形。正方形是 Angular 色的前景色
2. 将 context.globalCompositeOperation 更改为 destination-in
3. 在正方形上绘制 Angular 色

这一切都是在名为 putChar 的函数中完成的。但由于某种原因，似乎只有最后一个 putChar 调用才会呈现。

在下面的 JSFiddle 中，我从库中删除了除了重现问题所需的所有内容。 putChar 在第 56、57 和 58 行中调用。它应该在一行中呈现黄色“a”、绿色“b”和蓝色“c”。但仅呈现第三个 putChar 调用(蓝色“c”。)

http://jsfiddle.net/r96Lh/3/

这是我第一次使用复合操作，所以我一定错过了一些东西。有人知道为什么会发生这种情况吗？

Answer 1

您可以根据需要多次更改复合操作。

在这里您可以看到规范中全局复合操作的定义:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-globalcompositeoperation

这里有各种操作的快速视觉提醒:

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

那么您的情况发生了什么？

当使用复合模式“destination-in”时，这正是预期的行为，只有正在绘制的内容将保留在 Canvas 上，并且将使用像素的颜色进行绘制那已经在那里了。

因此，每次打印一个字符时，都会删除其他所有内容，这不是问题，只是不是您想要的。

如何获得您想要的行为？

1) 您可以在单独的 Canvas 上构建字符，然后在主 Canvas 上绘制 Canvas 。

2)但更简单的方法是使用剪辑:通过剪辑，您可以将效果的“范围”限制为您希望操作发生的矩形:

在绘制之前，只需添加:

    context.save();
    context.beginPath();
    context.rect(x * GenCon.font.width,
                      y * GenCon.font.height,
                      GenCon.font.width,
                      GenCon.font.height);
    context.clip();

并且不要忘记:

    context.restore();

在这里工作 fiddle :http://jsfiddle.net/gamealchemist/r96Lh/4/