Question

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

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

在角色要去的空间上画一个正方形。正方形是角色的前景色
将context.globalCompositeOperation更改为destination-in
在正方形上绘制字符

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

在下面的JSFiddle中，我已经删除了库中的所有内容，除了重现问题所需的内容。在第56,57和58行中调用putChar。它应该呈现黄色＆＃34; a＆＃34;，绿色＆＃34; b＆＃34;和蓝色＆＃34; c＆＃ 34;一个接一个。但只会呈现第三个putChar来电（蓝色＆＃34; c＆＃34;。）

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

这是我第一次使用复合操作，所以我必须遗漏一些东西。任何人都知道为什么会这样吗？

Answer 1

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

在这里，您可以在规范中看到globalComposite Operation的定义：

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

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

使用复合模式＆＃39; destination-in＆＃39;时，这正是预期的行为，仅绘制的内容将保留在画布上，并且将使用已存在的像素的颜色绘制。

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

如何获得您寻求的行为？

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

2）但更简单的方法是使用剪辑：通过裁剪限制范围＆＃39;效果仅限于您希望操作发生的矩形：

在绘图之前，只需添加：

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

并且不要忘记：

    context.restore();

在这里工作小提琴：http://jsfiddle.net/gamealchemist/r96Lh/4/

Answer 2

来自http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

重要的是要注意画布上下文只能支持一个复合操作在其整个生命周期中。如果我们想使用如本教程所做的那样，我们需要应用多个复合操作隐藏画布上的操作，然后将结果复制到一个可见画布。

因此，使用这种方法，你可能不得不使用两个画布，并将每个画面的一部分插入到另一个画布中。

当使用“destination-in”时，只有最后绘制的东西似乎呈现

2 个答案: