javascript - Canvas 中每个上下文调用多个剪辑

我似乎无法在画布上进行第二次剪辑调用。参见小提琴：http://jsfiddle.net/m2hL17nu/
请注意，第一个径向渐变是如何修剪的，而第二个则不是。

我见过Can you have multiple clipping regions in an HTML Canvas?，但是保存还原似乎仍然无法使下一个clip（）工作。

在此先感谢您的帮助。请参见下面的代码：

var x1 = 300,
    y1 = 100,
    x2 = 50,
    y2 = 50,
    r = 20;

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function createRadialGradient (xa, ya, xb, yb, r) {
    var grd = context.createRadialGradient(xa, ya, 0, xb, yb, r);
    grd.addColorStop(0, 'rgba(0,0,0,1)');
    grd.addColorStop(1, 'rgba(0,0,0,0)');
    context.fillStyle = grd;
    context.fill();
}
context.save();
context.rect(x1-r,y1-r,r,r);
context.clip();
context.rect(0, 0, canvas.width, canvas.height);
createRadialGradient(x1, y1, x1, y1, r);

context.restore();

context.save();
context.rect(x2-r,y2,r,r);
context.strokeStyle = 'black';
context.clip();
context.rect(0, 0, canvas.width, canvas.height);
createRadialGradient(x2, y2, x2, y2, r);

context.stroke();

最佳答案

您应该分别在绘制剪辑之前和在clip（）方法之后使用beginPath（）和closePath（）：

var x1 = 300,
    y1 = 100,
    x2 = 50,
    y2 = 50,
    r = 20;

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function createRadialGradient (xa, ya, xb, yb, r) {
    var grd = context.createRadialGradient(xa, ya, 0, xb, yb, r);
    grd.addColorStop(0, 'rgba(0,0,0,1)');
    grd.addColorStop(1, 'rgba(0,0,0,0)');
    context.fillStyle = grd;
    context.fill();
}
context.save();
context.beginPath();
context.rect(x1-r,y1-r,r,r);
context.closePath();
context.clip();
context.rect(0, 0, canvas.width, canvas.height);
createRadialGradient(x1, y1, x1, y1, r);

context.restore();

context.save();
context.beginPath();
context.rect(x2-r,y2,r,r);
context.closePath();
context.clip();
context.strokeStyle = 'black';
context.rect(0, 0, canvas.width, canvas.height);
createRadialGradient(x2, y2, x2, y2, r);

context.stroke();

 <canvas id="myCanvas" width="500" height="500"></canvas>

关于javascript - Canvas 中每个上下文调用多个剪辑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26971907/