HTML5：画布上的反向文本颜色 [英] HTML5: Inverse text-color on canvas

问题描述

我想在画布上以背景的反色绘制文本（以确保文本无论背景颜色是否可读）。我相信oldskool bitblt-ing，这是一个XOR操作。

I want to draw text on a canvas in the inverse color of the background (to make sure the text is readible no matter the background color). I believe in oldskool bitblt-ing, this was an XOR operation.

如何做到这一点？

推荐答案

我已经删除了我的旧答案，因为它没有解决问题。截至最近，有一些新的 globalCompositeOperation 可以做各种各样的好事。我已经创建了示例，其中显示了如何获取反向文本。如果链接断开，方法基本上是这样的：

I've removed my old answer, as it did not solve the question. As of recently, there are new globalCompositeOperations that do all kinds of great things. I've created an example that shows how to obtain inverted text. In case that link breaks, the method is essentially this:

ctx.globalCompositeOperation = "difference";
ctx.fillStyle = "white";
//draw inverted things here

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

这篇关于HTML5：画布上的反向文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！