如何在 HTML 画布上使颜色透明？

debugcn 发表于 Dev

杜克

我有一个 HTMLCanvasElement，上面已经绘制了一些东西，我需要将它的区域设置为透明。我不知道那个区域的坐标，所以我不能使用路径，但我知道我想要摆脱的颜色。

具体来说，我有一个包含文本的 html 元素，按照此处的建议进行：https : //css-tricks.com/adding-stroke-to-web-text/，并将其绘制在画布元素上，如下所示：Rendering HTML elements到 <canvas>。

问题是，在进一步使用它之前，我想让我的文本的白色核心在生成的画布元素上透明。这样只会保留文本的笔划。

为什么不直接在画布上描边文本？原因是我需要调整字母间距，只有CSS样式可以做到这一点。

代码片段有点不可读，因为实际上它是通过使用 Bridge.Net 编译 C# 生成的，但应该给出我正在尝试做的总体思路：

ConstructLabel$1: function (toWrite, font, letterSpacing, labelConstructed) {
            if (toWrite == null || Bridge.referenceEquals(toWrite, "")) {
                return null;
            }
            var canvas = document.createElement("canvas");
            var textElement = document.createElement("div");
            textElement.style.width = "auto";
            textElement.style.position = "absolute";
            textElement.style.whiteSpace = "nowrap";
            textElement.style.letterSpacing = letterSpacing;
            textElement.style.font = font;

            //make the storking of text
            textElement.style.color = "white";
            textElement.style.textShadow = "-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000";

            textElement.textContent = toWrite;

            //ToCanvas is my wrapper that takes a HTML element and returns a new canvas that
            //will draw a 1:1 representation of that element on it. It executes
            //the callback after it being drawn.
            return Utility.ToCanvas(textElement, function (drawnCanvas) {
                var ctx = drawnCanvas.getContext("2d");
                //ctx.ClearColor("white"); <----- how to do this?
                labelConstructed(drawnCanvas);
            });
        }

杜克

我终于在这里找到了一个答案：https : //gamedev.stackexchange.com/questions/19257/how-do-i-make-magenta-in-my-png-transparent-in-html5-canvas-js这里应用的是：

ConstructLabel$1: function (toWrite, font, letterSpacing, labelConstructed) {

            [code here as earlier]

            return Utility.ToCanvas(textElement, function (drawnCanvas) {
                var ctx = drawnCanvas.getContext("2d");
                var matrix = ctx.getImageData(0, 0, drawnCanvas.width, drawnCanvas.height);
                var data = matrix.data;
                for (var i = 0; i < data.length; i = (i + 4) | 0) {
                    if (((((data[i] + data[((i + 1) | 0)]) | 0) + data[((i + 2) | 0)]) | 0) === 765) {
                        data[((i + 3) | 0)] = 0;
                    }
                }
                ctx.putImageData(matrix, 0, 0);
                labelConstructed(drawnCanvas);
            });
        },

由于锯齿，这确实会在文本的内侧留下一些粗略的白色像素，但如果需要，可以通过更改像素条件来纠正它。

像这样进行过滤的结果应该被缓存，因为它是一个很长的循环来逐个像素地做东西。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。