画布上的每个操作是否可以设置过滤器？

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>