说我在HTML5画布上有一个圆(弧)。我可以这样填写：
ctx.arc(100,100,50,2 * Math.PI); ctx.fill();
它是一个治疗。但是，如何填补相反的区域？现在它是一个黑色的圆圈是白色的，但我希望它沿着以下图像的线条(其中白色是背景颜色，黑色是填充颜色)：
我知道我只能使用黑色的背景，画一个白色的圆圈，但背景可以是任何东西(以前已经画过的各种东西，所以只是交换颜色是不可能的)。
另一件事是，不应该填写完整的画布，而是取消了一个圆形的正方形。
我正在考虑一个globalCompositeOperation，但似乎不符合我的需要，因为他们都不按照我的需要行事。
那么，如何完成填充“对面”区域，如示例图像？
解决方法
您可以使用另一个画布作为掩码：
// This is the canvas where you want to draw
var canvas = document.getElementById('your-canvas');
var ctx = canvas.getContext('2d');
// I'll use a skyblue background that covers everything
// Just to demonstrate
ctx.fillStyle = "skyblue";
ctx.fillRect(0,canvas.width,canvas.height);
// Create a canvas that we will use as a mask
var maskCanvas = document.createElement('canvas');
// Ensure same dimensions
maskCanvas.width = canvas.width;
maskCanvas.height = canvas.height;
var maskCtx = maskCanvas.getContext('2d');
// This color is the one of the filled shape
maskCtx.fillStyle = "black";
// Fill the mask
maskCtx.fillRect(0,maskCanvas.width,maskCanvas.height);
// Set xor operation
maskCtx.globalCompositeOperation = 'xor';
// Draw the shape you want to take out
maskCtx.arc(30,30,10,2 * Math.PI);
maskCtx.fill();
// Draw mask on the image,and done !
ctx.drawImage(maskCanvas,0);
<canvas id="your-canvas">
Demo here。