如何在画布上填充“相反"的形状? [英] 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屋！