根据背后的颜色动态更改文字颜色（谷歌地图）

Question

我有谷歌地图api作为我的全屏幕背景，可以由用户调整大小和移动。我希望我在地图上的文字动态地改变为它背后颜色的倒数。提高知名度。

因此，如果用户在海洋上碰巧是0x0000FF，那么文本将是0xFFFF00。除非有人已经完成了这个功能，否则让我看到文本背后的每个像素都是疯狂的。

这是否存在？

Answer 1

您可以在HTML 5中执行此操作。

基本上你绘制一个HTML5画布，然后你需要在它移动或其他一些事件时获取鼠标的位置。鉴于您已经在画布上，您使用getImageData(x, y, width, height)来获取部分选区的像素数据。

例如：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.getImageData(10,10,50,50);

您获取的数据对象包含选择中每个像素的四个值，R，G，B和A. RGB是颜色通道，A是Alpha通道（可见性）。

下一步是将该值从RGB转换为Hex，您可以使用简单的辅助函数执行此操作：

function rgbToHex(r, g, b) {
    return ((r << 16) | (g << 8) | b).toString(16);
}

现在你有了颜色，你需要创建一个映射或函数来获得反色。根据您想要的效果，您必须稍微使用此功能。以下是两个执行此类操作的站点，您可以查看源代码以查看其功能并根据需要进行修改。

• Inverse Color Code Generator
• Inverse / Opposite Color Generator

然后您可以使用JQuery设置文本的颜色。

Answer 2

这就是我所做的，我使用透明背景来突出显示文本。我想这可能适合你。