Javascript 如何将ColorMatrix与画布上下文一起应用

我正在画布上工作，并使用EaselJS库一起玩。 使用EaselJS，我能够使用过滤器应用颜色矩阵

    const myGraphics = new createjs.Shape();
    myGraphics.graphics.bf(img, 'no-repeat')
        .drawCircle(x, y, cursorSize);

    const colorMatrix = [0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 1, 0];
    const blurFilter = new createjs.BlurFilter(5, 5, 1);
    myGraphics.filters = [new createjs.ColorMatrixFilter(colorMatrix), blurFilter];

    myGraphics.cache(0, 0, 500, 500);

在不使用EaselJS的情况下也可以应用同样的方法吗？ 我有下面的代码

    const patt = ctx.createPattern(img, 'no-repeat');
    ctx.filter = 'blur(5px)';
    ctx.fillStyle = patt;
    ctx.beginPath();
    ctx.arc(x, y, r1, 0, Math.PI * 2);
    ctx.fill();

如何将colorMatrix过滤器应用于上述画布上下文

---

提前感谢

您可以将svg过滤器与css

url（#filter\u id）

符号一起用于

上下文。过滤器

属性，对于颜色矩阵，使用svg元素：

const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
const img=新图像（）；
img.onload=e=>{
ctx.fillStyle=ctx.createPattern（img，“repeat”）；
ctx.filter='url（#矩阵）'；
ctx.rect（20,20,460,460）；
比例尺（0.15,0.15）；
ctx.fill（）；
};
img.src=”https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";

width=“500”height=“500”>