我想知道以下代码是否会产生适当的行为。我觉得左上角的方 block 应该还是绿色的。也就是说,如果我剪辑一个区域,十个恢复,然后在第二个区域绘画, Canvas 在两个区域绘画。为什么?
https://jsfiddle.net/s6t8k3w3/
var my_canvas = document.getElementById('canvas');
var ctx = my_canvas.getContext("2d");
//Make Clipping Path 1
ctx.save();
ctx.rect(20, 20, 100, 100);
ctx.clip();
//Fill Background with Green
ctx.fillStyle = 'rgba(0,255,0,1)';
ctx.fillRect(0, 0, my_canvas.width, my_canvas.height);
//Close Clipping Path 1
ctx.restore();
//Open Clipping Path 2
ctx.save();
ctx.rect(50, 50, 100, 100);
ctx.clip();
//Fill background with Blue
ctx.fillStyle = 'rgba(0,0,255,1)';
ctx.fillRect(0, 0, my_canvas.width, my_canvas.height);
//Draw Line
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 500);
ctx.stroke();
//CloseClipping Path 2
ctx.restore();
最佳答案
您实际上并没有用第二个 ctx.save()
打开第二个剪切路径;为此,您需要调用 ctx.beginPath()
关于javascript - HTML5 Canvas 没有正确裁剪?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35659901/