Javascript Canvas 上下文过滤器仅适用于模糊

Question

我有兴趣将 CSS 滤镜应用于 javascript canvas 的图像数据。我已经找到了canvas context filter。例如，这适用于模糊。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.filter = 'blur(3px)';
ctx.font = '48px serif';
ctx.strokeText('Hello world', 50, 100);

<canvas id="canvas"></canvas>

虽然下面的代码不起作用，因为如果它起作用，那么整个屏幕都会变白。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.filter = 'brightness(1000%)';
ctx.font = '48px serif';
ctx.strokeText('Hello world', 50, 100);

<canvas id="canvas"></canvas>

此外，作为旁注，我不关心让我的应用程序在非 Chrome/FF 浏览器上可用，所以请不要提及这一点，除非你有它的 polyfill。

Answer 1

您看不到亮度效果，因为文本默认为黑色。

亮度更改所选颜色的浓度并将其与黑色混合，因此，例如，如果您有红色文本和亮度属性 70%，那么您的文本将有 70% 的红色和30% 黑色。

只需在 strokeStyle 中添加颜色即可：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.filter = 'brightness(70%)';
ctx.font = '48px serif';
ctx.strokeStyle = 'red';
ctx.strokeText('Hello world', 50, 100);

<canvas id="canvas"></canvas>

Answer 2

我找到了问题的答案：您必须将 canvas 绘制到自身上才能应用过滤器。

var canvas1 = document.getElementById('canvas1');
var ctx1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');

ctx1.font = '48px serif';
ctx1.strokeStyle = 'red';
ctx1.strokeText('Hello world', 50, 50);
ctx1.filter = 'brightness(0%)';

ctx2.font = '48px serif';
ctx2.strokeStyle = 'red';
ctx2.strokeText('Hello world', 50, 50);
ctx2.filter = 'brightness(0%)';
ctx2.drawImage(canvas2, 0, 0);

Before<br />
<canvas id=1></canvas><br />
After<br />
<canvas id=2></canvas>

Javascript Canvas 上下文过滤器仅适用于模糊

Javascript Canvas Context Filter Only Applies To Blur

javascript

google-chrome

image-processing

html5-canvas

css-filters