WebGL по умолчанию является прозрачным. Вот пример
const gl = document.getElementById("c").getContext("webgl");
gl.clearColor(0.5, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);
pre {
padding-left: 50px;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
}
canvas {
z-index: 2;
position: absolute;
top: 0px;
border: 1px solid black;
}
<pre>
Some
text
under
the
canvas
</pre>
<canvas id="c"></canvas>
Обратите внимание, что браузер предполагает, что пиксели на холсте представляют значения PRE-MULTIPLIED-ALPHA , Это означает, например, если вы изменили прозрачный цвет на (1, 0, 0, 0,5), вы получили бы что-то, чего вы больше не видите в HTML.
Что я имею в виду, умноженная альфа означает, что части RGB таковы, что они уже были умножены на альфа-значение. Итак, если вы начали 1,0,0 для RGB, а ваша альфа - 0,5. Затем, если вы умножаете RGB на альфа, вы получите 0,5, 0, 0 для RGB. Это то, что браузер ожидает по умолчанию.
Если пиксели в WebGL равны 1,0,0,0,5, что не имеет смысла для браузера, и вы получите странные эффекты.
См., например,
const gl = document.getElementById("c").getContext("webgl");
gl.clearColor(1, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);
pre {
padding-left: 50px;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
}
canvas {
z-index: 2;
position: absolute;
top: 0px;
border: 1px solid black;
}
<pre>
Some
text
under
the
canvas
</pre>
<canvas id="c"></canvas>
Обратите внимание, что черный текст стал красным, даже если вы 'd думаю, что альфа 0,5 = 50% черного текста и 50% красного холста WebGL. Это потому, что красный не был предварительно умножен.
Вы можете решить эту проблему, убедившись, что значения, которые вы создаете в WebGL, представляют собой предварительно умноженные значения. Или вы можете сообщить браузеру, что ваши пиксели WebGL не являются предварительно умноженное при создании контекста webgl с помощью
const gl = canvas.getContext("webgl", { premultipliedAlpha: false });
Теперь снова работают 1,0,0,0,5 пикселя. Пример:
const gl = document.getElementById("c").getContext("webgl", {
premultipliedAlpha: false,
});
gl.clearColor(1, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);
pre {
padding-left: 50px;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
}
canvas {
z-index: 2;
position: absolute;
top: 0px;
border: 1px solid black;
}
<pre>
Some
text
under
the
canvas
</pre>
<canvas id="c"></canvas>
Как вы это делаете, зависит ваше приложение. Многие программы GL ожидают, что непремультиплексная альфа, поскольку все остальные части HTML5 ожидают премультиплексированную альфу, поэтому WebGL дает вам оба варианта.
Вы не можете сделать это без какой-либо формы JavaScript, которая перезагружает DOM.
Вы можете легко сделать это с помощью jquery, если добавите что-то подобное на свою страницу. Конечно, замените элементы данных теми элементами, которые есть в вашей форме, и замените 2000 на период времени, который вы хотите использовать для автосохранения.
Я использую функцию лезвия laravel, если вы делаете это с сырым php, просто замените {{url (/ your / post / route)}} на ваш URL.
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
jQuery(function () {
jQuery.post("{{url(/your/post/route)}}", function (data) {
jQuery("[name='name']").val(data.name);
jQuery("[name='city']").val(data.city);
}, "json");
setInterval(function () {
jQuery.post("{{url(/your/post/route)}}", $("form").serialize());
}, 2000);
});