Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

In the front-end application, whether PC or mobile. There are always times when you need to guide the user.

Typically, we cover our application pages with a black mask and then bootstrap them.

What does the bootstrap do to the page? It tells the user what to do.

While booting, other functions on our page are not available.

I believe that students who develop mobile terminals are most familiar with such scenarios, while PC terminal application scenarios are relatively few.

I find that many students will simply cut the black background into an image and throw it on the page, or cut out the main image.

In this way, of course, the same effect can be achieved.

However, it is not optimal, and large images can increase performance consumption and network latency.

This article will take you to learn how to elegantly punch holes in the front page.

Let’s take a look at some of my hollowed-out images.

Simple graphics using CSS hollow out

The first method is to use CSS for hollowing.

So how do you hollow out pages in CSS?

Some students will think, use 4 black transparent div pieced together, the middle can get a rectangular hollow out.

So the question is, do I want a hollow round, oval, rounded rectangle? And how to do that?

There are two properties in CSS:

• border
• box-shadow

Border adds a border to the node box, and box-shadow adds a shadow to the node box.

So, these two attributes make us have a basis for hollow out.

When the border or shadow is large, the effect can be hollow out

<div class="cricle"></div>
Copy the code

/* create a circle */
.cricle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1000px solid rgba(0.0.0.0.8);
    /* box-shadow: 000 1000px rgba(0,0,0,0.8); * /
}
Copy the code

In this way, our page has a hollow circle.

Notice the use of border-radius to control div shapes.

So again, we’re just hollowing out one, but what if we need multiple hollowing out?

At this point, we need to be flexible, put a div box on top of each hollow node, and then assemble each box on the page.

 <! -- Hollow out two -->
<div class="mask-con-1">
    <div class="round-rect"></div>
</div>
<div class="mask-con-2">
    <div class="cricle"></div>
</div>
Copy the code

.mask-con-1{
    position: absolute;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.round-rect{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-56.8%) translateY(-56.8%);
    width: 120px;
    height: 180px;
    border: 1000px solid rgba(0.0.0.0.8);
    border-radius: 1020px;
}

.mask-con-2{
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.mask-con-2 .cricle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-51%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1000px solid rgba(0.0.0.0.8);
}
Copy the code

In this way we get the hollowing out effect shown below:

Isn’t it interesting that we don’t have to slice and overlay every time we encounter a bootstrap?

However, we should note that:

Box-shadow has some compatibility. It is recommended to use border. When we set border and border-radius at the same time, the rounded corners will be overwritten, so we set border-radius to add the rounded corners to the border.

We can take a look at border and border-radius love-killing.

As you can see, the rounded corners of the inner layer slowly disappear as the border increases.

So if we want to set the inner hollow rounded corner, we need to increase the base value of border.

CSS hollowing also has many limitations, such as hollowing out irregular graphics pales in comparison

We also have canvas method to hollow out.

Canvas hollow out complex irregular graphics

The method of drawing shapes on canvas can also be used for hollow out. How do you do that?

Clockwise painting background, counterclockwise painting needs a hollow shape

This is the core of canvas hollow out.

<canvas id="canvas"></canvas>
Copy the code

Draw on canvas.

const canvas = document.getElementById("canvas");
canvas.width = 960;
canvas.height = 540;
const ctx = canvas.getContext("2d");
Copy the code

Let’s start by drawing a hollow rectangle:

Draw a large background clockwise and a rectangle counterclockwise

ctx.beginPath();
ctx.fillStyle = 'rgba (0,0,0,0.8)';

// Clockwise
ctx.moveTo(0.0);
ctx.lineTo(960.0);
ctx.lineTo(960.540);
ctx.lineTo(0.540);

// Counterclockwise hollow
/ / square
ctx.moveTo(40.30);
ctx.lineTo(40.100);
ctx.lineTo(150.100);
ctx.lineTo(150.30);

ctx.fill();
Copy the code

In this way, we have a hollow rectangular frame.

Again, let’s draw a circle:

/ / round
ctx.moveTo(700.200);
ctx.arc(700.200.150.0.Math.PI * 2.true);
Copy the code

Next, we change the brush strokes and draw some irregular shapes:

/ / triangle
ctx.moveTo(200.30);
ctx.lineTo(200.80);
ctx.lineTo(240.60);

/ / class ellipse
ctx.moveTo(140.267);
ctx.quadraticCurveTo(117.252.64.336);
ctx.quadraticCurveTo(12.423.40.438);
ctx.quadraticCurveTo(63.453.114.367);
ctx.quadraticCurveTo(166.280.140.267);

/ / irregular
ctx.moveTo(197.320);
ctx.lineTo(210.342);
ctx.lineTo(215.370);
ctx.lineTo(268.360);
ctx.lineTo(226.535);
ctx.lineTo(251.539);
ctx.lineTo(300.323);
ctx.lineTo(263.326);
ctx.lineTo(235.302);
ctx.lineTo(236.303);
ctx.lineTo(213.317);

ctx.fill();
Copy the code

And you get the hollowing out underneath.

The difficulty would be the sloping ellipse

We can use Photoshop to draw the following image, and then we get a series of points, which we can write into the quadratic Bezier curve, and we can draw it smoothly.

This is also a little trick.

Note that hollow out graphics must be drawn against the background. Of course, hollow rectangles can also use the clearRect method

Many game engines have the concept of a mask

Many students will use masks to do hollow out, in fact, not desirable ha, mask performance is poor.

But there is no denying that masks can hollow out an area according to the picture. The function is still very fragrant.

Outliers use SVG hollowing

Finally, let’s take a look at the SVG hollowing method.

This hollowing is not very common and SVG compatibility is not very good.

Take a look at the example I wrote:

<! -- SVG openwork -->
<svg width="960" height="540">
    <defs>
        <mask id="mask">
            <rect class="rect1" x="0" y="0" width="100%" height="100%"/>
            <circle class="mask-to" cx="565" cy="67" r="50"/>
            <circle class="mask-to" cx="434" cy="320" r="100"/>
            <circle class="mask-to" cx="462" cy="209" r="40"/>
            <ellipse cx="141" cy="135" rx="50" ry="100"/>
            <rect class="mask-to" width="100" height="100" x='824' y="142"/>
        </mask>
    </defs>
    <rect class="rect-bg" x="0" y="0" width="100%" height="100%"/>
</svg>
Copy the code

.svg {
    position: absolute;
}
.rect1 {
    stroke:none; 
    fill: #fff;
}
.rect2 {
    stroke: none;
    fill: #fff;
    mask: url(#mask3);
}

.mask-to{
    fill: # 000
}

.rect-bg{
    stroke: none; fill: rgba(0.0.0.0.7); mask: url(#mask)}Copy the code

In this way, the following hollow effect can also be obtained:

There are also not many graphics that can be drawn using SVG hollowing.

Also note that the SVG mask and background need to be contrasted. So I chose black and white here.

The end of the

So far, three kinds of hollow out method is introduced here, we have a better way?

We need to note:

If the page hollow out is simple, use CSS hollow out. If irregular shapes are involved, canvas is used. In general games, canvas is used. Try not to use SVG methods (which are powerful, regardless of the browser).

As little as possible to request picture resources, optimize performance is what we need to do, not what pages are stacked by pictures.

If you have a better way, you can leave a comment, thank you very much

Welcome to pat brick pointing, the author’s skill is still shallow, if there is improper place please be corrected.

The article is shallow, hope you don’t hesitate to your comments and praise ~

Note: this article is the author’s painstaking work, reprint must be declared