Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность.
предисловие
Во внешнем приложении, будь то ПК или мобильный терминал, пользователю всегда необходимо загрузиться.
Как правило, мы накладываем слой поверх страницы нашего приложения.черная накладка, а затем начальную загрузку.
Содержание руководства предназначено для того, чтобы управлять страницей и направлять пользователя, как действовать.
а такжеруководитьВ настоящее время другие функции на нашей странице недоступны.
Считается, что этот сценарий наиболее знаком студентам, разрабатывающим мобильные терминалы, а сценариев приложений на стороне ПК относительно немного.
И я обнаружил, что многие студенты вырезают фон с черной маской прямо на картинке, бросают ее прямо на страницу или вырезают основную картинку.
Таким образом, конечно, можно получить тот же эффект.
Однако это не оптимальное решение, а большие изображения также увеличивают потребление производительности и задержку в сети.
В этой статье вы узнаете, как использовать главную страницу.элегантный дырокол.
Давайте посмотрим на некоторые из полых эффектов, которые я сделал.
Простая графика использует выдолбленный css
Первый метод, использующий CSS для выдалбливания.
Итак, как выдолбить страницу в css?
Некоторые ученики подумают об этом, используйте 4 черных прозрачныхdivРасплющите, у вас может получиться прямоугольное углубление посередине.
Итак, вопрос в том, хочу ли я выдолбить круг, эллипс или прямоугольник со скругленными углами, как этого добиться?
В css есть два свойства:
- border
- box-shadow
borderэто добавить границу к узлу,box-shadowзаключается в добавлении тени к узлу.
Затем эти два свойства побуждают нас иметь основу для выдолбления.
Когда граница или тень большие, может быть достигнут эффект пустоты.
<div class="cricle"></div>
/* 镂空一个圆 */
.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: 0 0 0 1000px rgba(0,0,0,0.8); */
}
Таким образом, наша страница имеет пустой круг.
Уведомление
Используйте радиус границы для управления формой div.
Проблема возникает снова, таким образом, мы просто выдолбили один, что, если нам нужно выдолбить более одного на странице?
На данный момент нам нужно обойти это, поместить блок div поверх каждого полого узла, а затем объединить каждый блок на странице.
<!-- 镂空两个 -->
<div class="mask-con-1">
<div class="round-rect"></div>
</div>
<div class="mask-con-2">
<div class="cricle"></div>
</div>
.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);
}
Таким образом, мы получаем эффект пустоты на картинке ниже:
Не правда ли, очень интересно, чтобы нам не нужно было каждый раз, когда мы сталкиваемся с проводником, вырезать карту и обложку.
Тем не менее, мы должны принять к сведению моменты:
Коробка-тень Некоторые совместимость с рекомендуемой границей.
При одновременной установке границы и радиуса границы закругленные углы будут покрыты, поэтому, когда мы устанавливаем радиус границы, добавляем диапазон закругленных углов на основе границы.
Мы можем смотреть на любовь и убийство границы и границы-радиуса.
Видно, что по мере увеличения границы закругленные углы внутреннего слоя постепенно исчезают.
Итак, если мы хотим установить внутреннее полое скругление, нам нужно увеличить базовое значение границы.
Опустошение в CSS также имеет много ограничений, например, опустошение неправильной графики выглядит карликовым.
У нас также есть метод холста для выдалбливания.
Сложная нерегулярная графика использует холст для выдолбления
Метод рисования фигур на холсте также можно использовать для выдалбливания.
Как это сделать?
Нарисуйте фон по часовой стрелке, а фигуры, которые нужно выдолбить, нарисуйте против часовой стрелки.
Это ядро выдолбления холста.
<canvas id="canvas"></canvas>
Рисовать на холсте.
const canvas = document.getElementById("canvas");
canvas.width = 960;
canvas.height = 540;
const ctx = canvas.getContext("2d");
Сначала попробуем нарисовать пустой прямоугольник:
Нарисуйте большой фон по часовой стрелке и прямоугольник против часовой стрелки.
ctx.beginPath();
ctx.fillStyle = 'rgba(0,0,0,0.8)';
//顺时针话方
ctx.moveTo(0, 0);
ctx.lineTo(960, 0);
ctx.lineTo(960, 540);
ctx.lineTo(0, 540);
//逆时针镂空
//方块
ctx.moveTo(40, 30);
ctx.lineTo(40, 100);
ctx.lineTo(150, 100);
ctx.lineTo(150, 30);
ctx.fill();
Таким образом, мы получаем полую прямоугольную рамку.
Аналогично снова нарисуем круг:
// 圆
ctx.moveTo(700, 200);
ctx.arc(700, 200, 150, 0, Math.PI * 2, true);
Далее мы заменяем штрихи и рисуем неправильные формы:
// 三角
ctx.moveTo(200, 30);
ctx.lineTo(200, 80);
ctx.lineTo(240, 60);
//类椭圆
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);
//不规则
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();
Получается эффект пустоты ниже.
Сложность должна быть наклонным эллипсом.
Мы используем ps для рисования следующих визуализаций, а затем получаем ряд точек, записываем эти точки в квадратичную кривую Безье, и мы можем плавно их рисовать.
Это тоже маленькая хитрость.
Уведомление
Полая фигура должна быть нарисована на фоне.
Конечно, пустой прямоугольник также может использовать метод clearRect.
Во многих игровых движках есть концепция маскировки.
Многие учащиеся будут использовать маски для выдалбливания, но это не рекомендуется, и эффективность маски низкая.
Но нельзя отрицать, что маска может выдолбить область в соответствии с картинкой Функция по-прежнему очень ароматная.
Используйте вырез svg для дополнений
Наконец, давайте представим метод пустотелости svg.
Этот вырез не очень распространен, и совместимость с svg не очень хорошая.
Взгляните на пример, который я написал:
<!-- svg镂空 -->
<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>
.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)
}
Таким образом, также может быть получен следующий эффект пустотелости:
Существует не так много графики, которую можно нарисовать с помощью выдолбления svg.
Также следует отметить, что маска SVG и фон должны образовывать контраст, поэтому я выбираю черно-белый.
конец
До сих пор здесь были представлены три метода выдолбления. У вас есть лучший способ?
Нам необходимо обратить внимание на:
Если выдолбление страницы очень простое, используйте выдолбление css.
Если задействованы неправильные формы, используется холст.
В общих играх метод использования холста подходит.
Старайтесь не использовать метод svg (наплевать на браузер, он все равно очень мощный).
Старайтесь запрашивать ресурсы изображения как можно меньше, оптимизация производительности — это то, что нам нужно сделать, и мы не можем полагаться на изображения для накопления всех страниц.
Если у вас есть лучший способ, вы можете оставить свой комментарий, большое спасибо ~
Приветствую всех, кто вносит исправления, мастерство автора еще невелико, если есть что-то неуместное, пожалуйста, поправьте меня.
Статья поверхностная, надеюсь, вы не стесняетесь комментировать и ставить лайки~
Примечание: Данная статья является кропотливой авторской работой, перепечатки должны быть заявлены