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

本是古典何须时尚 2022-10-09 14:22 174阅读 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 条评论，174人围观）

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

相关阅读

相关 Android学习之Textview控件字体颜色设置及颜色色值

在Textview中设置字体的颜色和大小共有两种方式： 1、在.xml中设置 android:text="这里是文字" android:textSize="字体大小"

港控/mmm°/ 2023年10月05日 16:43/ 0 赞/ 26 阅读

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

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

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

相关 css 反色_使用CSS和JavaScript检测反色

css 反色 There was something that bugged me after reading [David's article on the `invert

妖狐艹你老母/ 2023年02月22日 03:44/ 0 赞/ 24 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 HTML5+CSS3-浏览器前缀、css新特征、文本溢出、新的颜色设定、透明设定、文本填充色、文本边框色、圆角

CSS3 1、不同的浏览器需要不同的前缀（浏览器的私有属性）前缀浏览器 \-webkit chrome/safair \-moz

Love The Way You Lie/ 2022年08月22日 15:13/ 0 赞/ 12 阅读

相关第二节 html字体颜色

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

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

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

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

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