HTML5画布 - 用笔划剪切填充区域

Question

我这里的例子很少：https://jsfiddle.net/pets87/abdyer7r/2/

function drawImagesToCanvas() {
    var innerRadius = 15;
    var outerRadius = 140;
    var radius = outerRadius;
    var gX =  100;
    var gY =  100;

    var gradient = context.createRadialGradient(gX, gY, innerRadius, gX, gY, outerRadius);
    gradient.addColorStop(0, 'transparent');
    gradient.addColorStop(0.01, 'white');
    gradient.addColorStop(0.1, 'yellow');
    gradient.addColorStop(1, 'transparent');
    context.beginPath();
    context.arc(gX, gY, radius, 0, 2 * Math.PI);

    context.fillStyle = gradient;
    context.fill();
}
drawImagesToCanvas();   

function drawline(){
    context.beginPath();
    context.moveTo(180, 10);
    context.lineWidth = 2;
    context.lineTo(180, 200);
    context.stroke();
}
 drawline();

我有一个明亮的灯泡，如图所示。然后我想画一个笔画。中风就像一堵墙。我希望中风会切断来自灯泡的光线。

有办法吗？

Answer 1

我不确定，但你可以查看我尝试过的事情。 只需改变你的画线功能：

context.beginPath();
context.moveTo(180, 5);
context.fillStyle="black";
context.fillRect(180,5,200,200);
context.clearRect(182,5,200,200);

更新了小提琴：https://jsfiddle.net/abdyer7r/3/