canvas - 是否可以在画布上为每个操作设置一个过滤器？

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);  

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

标签： canvas

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>