Javascript 如何使橡皮擦在画布上形成渐变

我正在使用一个画布java擦除顶层以显示图像的其余部分

我想在这里创建一个（脉冲）梯度，虽然直到现在我只有一个硬圆

有人能帮我做这个（脉动）梯度圈吗？ 我的代码如下所示

（函数（）{
//创建新的画布元素并将其作为子元素追加
//，并返回对的引用
//新创建的canvas元素
函数createCanvas（父级、宽度、高度）{
var canvas={}；
canvas.node=document.createElement（'canvas'）；
canvas.context=canvas.node.getContext（'2d'）；
canvas.node.width=宽度| | 100；
canvas.node.height=高度| | 100；
parent.appendChild（canvas.node）；
返回画布；
}
函数init（容器、宽度、高度、填充颜色）{
var canvas=createCanvas（容器、宽度、高度）；
var ctx=canvas.context；
//定义自定义fillCircle方法
ctx.fillCircle=函数（x，y，半径，fillColor）{
this.fillStyle=fillColor；
this.beginPath（）；
这个。移动到（x，y）；
弧（x，y，半径，0，Math.PI*2，false）；
这个；
};
ctx.clearTo=函数（fillColor）{
ctx.fillStyle=fillColor；
ctx.fillRect（0，0，宽度，高度）；
};
ctx.clearTo（fillColor | |“#ddd”）；
//绑定鼠标事件
canvas.node.onmousemove=函数（e）{
如果（！canvas.isDrawing）{
返回；
}
var x=e.pageX-this.offsetLeft；
变量y=e.pageY-this.offsetTop；
var radius=55；//或其他
变量fillColor='#ff0000'；
ctx.globalCompositeOperation='destination out'；
ctx.fillCircle（x，y，半径，fillColor）；
};
canvas.node.onmouseinter=函数（e）{
canvas.isDrawing=true；
};
}
var container=document.getElementById（'canvas'）；
初始化（容器，30203000，#f8fa58'）；
})();
body{margin:0px；
背景：黑色；}
#帆布{
z指数：-1；
宽度：100vw；
高度：100vh；
溢出：隐藏；
背景：url(http://newscenario.net/bodyholes/files/works/Edward_Shenk.jpg)无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
尝试以下操作：


（函数（）{
//创建新的画布元素并将其作为子元素追加
//，并返回对的引用
//新创建的canvas元素
函数createCanvas（父级、宽度、高度）{
var canvas={}；
canvas.node=document.createElement（'canvas'）；
canvas.context=canvas.node.getContext（'2d'）；
canvas.node.width=宽度| | 100；
canvas.node.height=高度| | 100；
parent.appendChild（canvas.node）；
返回画布；
}
函数init（容器、宽度、高度、填充颜色）{
var canvas=createCanvas（容器、宽度、高度）；
var ctx=canvas.context；
//定义自定义fillCircle方法
ctx.fillCircle=函数（x，y，半径，fillColor）{
/*this.fillStyle=fillColor；
this.beginPath（）；
这个。移动到（x，y）；
弧（x，y，半径，0，Math.PI*2，false）；
这个*/
var radgrad=ctx.createRadialGradient（x，y，0，x，y，半径）；
radgrad.addColorStop（0，'rgba（255,0,0,1'）；
radgrad.addColorStop（0.5，'rgba（228,0,0,9'）；
radgrad.addColorStop（1，'rgba（228,0,0'）；
//画图
ctx.fillStyle=radgrad；
ctx.fillRect（x-半径，y-半径，x+半径，y+半径）；
};
ctx.clearTo=函数（fillColor）{
ctx.fillStyle=fillColor；
ctx.fillRect（0，0，宽度，高度）；
};
ctx.clearTo（fillColor | |“#ddd”）；
//绑定鼠标事件
canvas.node.onmousemove=函数（e）{
如果（！canvas.isDrawing）{
返回；
}
var x=e.pageX-this.offsetLeft；
变量y=e.pageY-this.offsetTop；
var radius=55；//或其他
变量fillColor='#ff0000'；
ctx.globalCompositeOperation='destination out'；
ctx.fillCircle（x，y，半径，fillColor）；
};
canvas.node.onmouseinter=函数（e）{
canvas.isDrawing=true；
};
}
var container=document.getElementById（'canvas'）；
初始化（容器，30203000，#f8fa58'）；
})();
body{margin:0px；
背景：黑色；}
#帆布{
z指数：-1；
宽度：100vw；
高度：100vh；
溢出：隐藏；
背景：url(http://i.imgur.com/UhAODHB.gif)无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
尝试以下操作：


（函数（）{
//创建新的画布元素并将其作为子元素追加
//，并返回对的引用
//新创建的canvas元素
函数createCanvas（父级、宽度、高度）{
var canvas={}；
canvas.node=document.createElement（'canvas'）；
canvas.context=canvas.node.getContext（'2d'）；
canvas.node.width=宽度| | 100；
canvas.node.height=高度| | 100；
parent.appendChild（canvas.node）；
返回画布；
}
函数init（容器、宽度、高度、填充颜色）{
var canvas=createCanvas（容器、宽度、高度）；
var ctx=canvas.context；
//定义自定义fillCircle方法
ctx.fillCircle=函数（x，y，半径，fillColor）{
/*this.fillStyle=fillColor；
这是贝金帕