html字体颜色反色,HTML5：画布上的反色文本颜色

本是古典何须时尚 2022-10-09 14:22 132阅读 0赞

更新：大多数较新的浏览器现在支持混合模式“差异”，可以达到相同的效果。

context.globalCompositeOperation = "difference";

旧回答：

有人应该认为合成的XOR模式可以做到这一点，但不幸的是，画布'XOR只对异位进行异或。

通过应用以下代码，我们可以收到如下结果：

![p5ULG.png][]

您可以像这样对画布进行扩展：

CanvasRenderingContext2D.prototype.fillInversedText =

function(txt, x, y) \{

//code - see below

\}

现在你可以在上下文中调用它作为普通的fillText，但稍有改动：

ctx.fillInversedText(txt, x, y);

为此，我们首先执行以下操作 - 测量文本。目前我们只能计算文本的宽度然后假定高度。这可能会或可能不会很好，因为字体可能非常高等等。幸运的是，这将在未来发生变化，但现在：

var tw = this.measureText(txt).width;

var th = parseInt(ctx.font, '10');

th = (th === 0) ? 10 : th; //assume default if no font and size is set

接下来我们要做的是设置一个离屏画布来绘制我们想要反转的文本：

var co = document.createElement('canvas');

co.width = tw;

co.height = th;

然后绘制实际文本。颜色无关紧要，因为我们只对这个画布的alpha通道感兴趣：

var octx = co.getContext('2d');

octx.font = this.font;

octx.textBaseline = 'top';

octx.fillText(txt, 0, 0);

然后我们提取我们想要绘制反转文本的区域的像素缓冲区以及现在包含我们文本的屏幕外画布的所有像素：

var ddata = this.getImageData(x, y, tw, th);

var sdata = octx.getImageData(0, 0, tw, th);

var dd = ddata.data; //cache for increased speed

var ds = sdata.data;

var len = ds.length;

然后我们反转像素的alpha通道大于0的每个像素。

for (var i = 0; i < len; i += 4) \{

if (ds\[i + 3\] > 0) \{

dd\[i\] = 255 - dd\[i\];

dd\[i + 1\] = 255 - dd\[i + 1\];

dd\[i + 2\] = 255 - dd\[i + 2\];

\}

\}

最后放回倒像：

this.putImageData(ddata, x, y);

这可能看起来像很多操作，但速度相当快。

(迷幻背景只是有一些变化，因为小提琴需要外部图像，当我们使用像素操作时，大多数都被CORS阻止。)

[p5ULG.png]: https://i.stack.imgur.com/p5ULG.png

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关前端计算色系渐变颜色

在前端中，可以使用 CSS 中的 `linear-gradient` 函数来实现色系渐变。例如，要在蓝色和红色之间创建一个渐变，可以使用以下代码： .gradie

矫情吗；*/ 2024年03月27日 12:29/ 0 赞/ 12 阅读

相关 html 颜色代码_HTML颜色（颜色代码）

html 颜色代码 In HTML, color codes are used for representing different colors on the webpag

待我称王封你为后i/ 2023年03月05日 09:36/ 0 赞/ 88 阅读

相关技巧：根据背景色自适应文本颜色

![format_png][] 作者：wsafight https://github.com/wsafight/personBlog/issues/27 针对企业服

落日映苍穹つ/ 2022年12月27日 12:40/ 0 赞/ 68 阅读

相关 html字体颜色反色,HTML5：画布上的反色文本颜色

更新：大多数较新的浏览器现在支持混合模式“差异”，可以达到相同的效果。 context.globalCompositeOperation = "difference"; 旧

本是古典何须时尚/ 2022年10月09日 14:22/ 0 赞/ 133 阅读

相关 html字体颜色自动变化,HTML判断输入长度，体会字体颜色变化(示例代码)

Document // change()方法在id 为txt 的TextBox 触发 onkeyup 事件时执行 function change() \{ //找到t

骑猪看日落/ 2022年10月05日 12:49/ 0 赞/ 164 阅读

相关 css 图片反色，颜色反色，高斯模糊

图片反色和颜色反色 <image src="https://kapai.obs.cn-southwest-2.myhuaweicloud.com/back/16290

柔情只为你懂/ 2022年09月05日 01:41/ 0 赞/ 191 阅读

相关第二节 html字体颜色

html字体代码： <html> <head> <title>字体颜色</title>

川长思鸟来/ 2022年07月12日 04:16/ 0 赞/ 404 阅读

相关 HTML - 颜色

http://[blog.csdn.net/pipisorry/article/details/78933397][blog.csdn.net_pipisorry_articl

迈不过友情╰/ 2022年06月02日 01:53/ 0 赞/ 162 阅读

相关 eclipse设背景色以及字体颜色

手动配置 1.背景颜色设置在eclipse导航栏界面 Window ——> General –> Editors –> Text Editors ，在右边的App

╰+攻爆jí腚メ/ 2021年09月26日 03:12/ 0 赞/ 396 阅读

相关 HTML 颜色

RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。 div {

柔光的暖阳◎/ 2021年07月25日 01:46/ 0 赞/ 404 阅读