如何对画布中使用的图案图像进行灰度化（javascript）

创建了一个圆上下文并添加了填充该圆的图案图像。如何使该图案图像灰度化。 有什么办法可以帮助我吗

代码：

    ctx.beginPath();
    var bg = new Image();    
    bg.src = image;  
    bg = function() {
        var pattern = ctx.createPattern(this, "no-repeat");
        ctx.fillStyle = pattern;
    };
    ctx.moveTo(canvasCenterHoriz, canvasCenterVert);
    ctx.arc(x, y, radius, startAngle, endAngle, direction);
    ctx.lineWidth = 0;
    ctx.fill();

---

这可能不是最好的方法，但它非常简单，而且很有效

我在下面附上了一个工作示例。下面是它的工作原理：

图案图像绘制在不可见的画布中。加载图像后，将在画布上绘制图像，并将白色覆盖和饱和度设置为全局合成操作。画布现在将包含图案的灰度版本

然后将临时画布转换为图像，并将其源设置为画布数据url。也许有更好的方法在两张画布之间发送图像数据，但我还没有找到

图案完成后，将使用新图案绘制原始圆弧

let canvas=document.getElementById（'grayscale-canvas'）；
设ctx=canvas.getContext（'2d'）；
函数makeGrayscaleBackground（图像，onready）{
var bg=新图像（）；
bg.src=图像；
bg.onload=函数（）{
//创建未附加到DOM的画布
var canvas=document.createElement（'canvas'）；
canvas.setAttribute（'width'，this.width）；
canvas.setAttribute（'height'，this.height）；
document.body.appendChild（画布）；
设ctx=canvas.getContext（'2d'）；
//绘制背景图像
ctx.drawImage（this，0，0）；
//然后在上面画一个白色层，用饱和合成操作
//这将从基础图像中删除颜色
ctx.globalCompositeOperation=“饱和”；
ctx.fillStyle=“#FFF”；
ctx.fillRect（0，0，this.width，this.height）；
onready（帆布）；
};
}
函数drawWithImage（图像）{
makeGrayscaleBackground（图像、函数（图案图像）{
//绿色背景
ctx.fillStyle=“#3f9”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
//使用我们创建的图像制作重复图案
var pattern=ctx.createPattern（patternImage，“repeat”）；
//用这个图案画一个弧
设x=y=canvas.width/2；
ctx.fillStyle=图案；
ctx.beginPath（）；
ctx.arc（x，y，canvas.width/2-10，0，2*Math.PI）；
ctx.fill（）；
})
}
//示例模式图像
//出于安全原因，映像需要与脚本托管在同一台服务器上！
var bgImage=“data:image/gif；base64，r0lgodlhaaqaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
drawWithImage（bgImage）；
document.getElementById（'bg'）.src=bgImage


实际背景图像：

修改后的背景图像：
dup答案的可能副本已经过时，并且不显示当前方法。使用
ctx.filter=“饱和（0%）”
并绘制图像，它将被灰度化。或者绘制图像，然后设置
ctx.globalCompositeOperation=“saturation”
和
ctx.fillStyle=“#888”
，然后使用填充绘制图像以获得灰度。此答案显示了许多应用于画布上视频的实时FX过滤器（但也可用于静止图像），并且不需要安全的相同域图像，而且比建议的复制答案的老派方法快很多。这很好@Blindman67，这里有一个更好的复制：你击败了我，有一个更好的答案：）你可以直接使用画布作为图案来源。谢谢，如果没有人自愿，我明天会更新这个片段。@kaido用你的建议更新了答案。干杯