如何填充画布上的“对面”形状？ [英] How to fill the 'opposite' shape on canvas?

问题描述

说我在HTML5画布上有一个圆圈（圆弧）。我可以像这样填写：

Say I have a circle (an arc) on HTML5 canvas. I can just fill it like this:

ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

这是一种享受。但是，如何填补相反的区域？现在它是白色的黑色圆圈，但我希望它沿着下图的线条（白色是背景颜色，黑色是填充颜色）：

It works a treat. However, how can one fill the opposite area? Now it's white with a black circle, but I'd like it to be along the lines of the following image (on which white is the background color and black is the filling color):

我知道我可以只使用黑色背景并绘制一个白色圆圈，但背景可以是任何东西（之前已经绘制过各种各样的东西，所以只能交换颜色）。

I know I could just use a black background and paint a white circle, but the background can be anything (all kinds of things have been drawn there before, so just swapping colors is not possible).

另一件事是不应该填充完整的画布，而是取消圆圈的正方形。

Another thing is that not the complete canvas should be filled, but rather a square with an circle canceled out.

我在考虑 globalCompositeOperation 但似乎没有符合我的需求，因为它们都没有根据我的需要行事。

I was thinking of a globalCompositeOperation but it does not seem to fit my needs as none of them act according to what I need.

那么，我怎样才能像示例图像一样填充'对面'区域？

So, how can I accomplish filling the 'opposite' area like in the example image?

解决方案

你可以使用另一个画布作为掩码：

You can do that using another canvas as mask :

// 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, 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, 0, maskCanvas.width, maskCanvas.height);
// Set xor operation
maskCtx.globalCompositeOperation = 'xor';
// Draw the shape you want to take out
maskCtx.arc(30, 30, 10, 0, 2 * Math.PI);
maskCtx.fill();

// Draw mask on the image, and done !
ctx.drawImage(maskCanvas, 0, 0);

<canvas id="your-canvas">

在这里演示。

这篇关于如何填充画布上的“对面”形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！