在画布上每个操作都可以有一个过滤器吗？

Question

在画布上，是否可以将过滤器应用于一个绘图操作，而不是另一个？

ctx.font = '48px serif';

ctx.filter = 'blur(4px)';
ctx.fillText('This is blurry', 30, 60);    

ctx.filter = undefined;
ctx.fillText('This should not be blurry', 60, 100);  

我希望第一个文本是模糊的，但第二个文本是清晰的。有没有办法做到这一点？

Answer 1

filter不接受undefined。您要查找的值是'none'

​

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

ctx.font = '48px serif';

ctx.filter = 'blur(4px)';
ctx.fillText('This is blurry', 30, 60);  

ctx.filter = 'none';
ctx.fillText('This should not be blurry', 60, 100);

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

​