API de JavaScript para la creación de imágenes dinámicas combinada con CSS
Para los futuros alumnos del curso "JavaScript Developer. Professional" se preparó una traducción del material.
También lo invitamos a visitar el seminario web abierto sobre el tema "Vue 3: las capacidades de la nueva versión de uno de los frameworks front-end más populares" . En la lección, los participantes, junto con un experto:
- Consideran las diferencias clave en la sintaxis de vue2 de vue3;
- comprenderá cómo trabajar con vue-router y VueX en la nueva versión del marco;
- intente crear un proyecto de Vue 3 desde cero usando Vue-cli.
¡Únete a nosotros!
. , , . , , , . , .
« », API CSS Painting.
, API .
API CSS Painting
CSS Painting API JavaScript- CSS, background-image border-image. API, CSSOM. CSS Houdini (Houdini — API , CSS ).
:
div {
background-image: url('assets/background.jpg);
}
CSS Painting API paint()
(worklet), JS, .
div {
background-image: paint(background);
}
.
, . , worklets, ?
, JavaScript-, , Paint Worklet ( ). Worklet — . (worklets), worklets , , worklets , ..
.
API CSS Painting
, .
1: paint()
CSS
, paint()
CSS, .
.bubble-background {
width: 400px;
height: 400px;
background-image: paint(bubble);
}
bubble worklet, . .
Bit , . , , , , .
Bit Node, TypeScript, React, Vue, Angular .
. : React , Bit.dev.
2: (worklet)
(worklets) JS-. (paint worklet) class
. : - class Bubble { …. }
. (worklet) registerPaint()
.
class Bubble {
paint(context, canvas, properties) {
........
}
}
registerPaint('bubble', Bubble);
registerPaint()
, CSS.
.
class Bubble {
paint(context, canvas, properties) {
const circleSize = 10;
const bodyWidth = canvas.width;
const bodyHeight = canvas.height;
const maxX = Math.floor(bodyWidth / circleSize);
const maxY = Math.floor(bodyHeight / circleSize);
for (let y = 0; y < maxY; y++) {
for (let x = 0; x < maxX; x++) {
context.fillStyle = '#eee';
context.beginPath();
context.arc(x * circleSize * 2 + circleSize, y * circleSize * 2 + circleSize, circleSize, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
}
}
}
}
registerPaint('bubble', Bubble);
paint()
. , , . Canvas API, .
3: (worklet)
(worklet) HTML-.
<div class="bubble-background"></div>
<script>
CSS.paintWorklet.addModule('https://codepen.io/viduni94/pen/ZEpgMja.js');
</script>
!
3 .
, , .
API CSS Painting?
CSS Painting API . , .
1.
, . CSS. CSS-, , . inputProperties()
.
registerPaint('bubble', class {
static get inputProperties() {
return ['--bubble-size', '--bubble-color'];
}
paint() {
/* ... */
}
});
, paint()
.
paint(context, canvas, properties) {
const circleSize = parseInt(properties.get('--bubble-size').toString());
const circleColor = properties.get('--bubble-color').toString();
const bodyWidth = canvas.width;
const bodyHeight = canvas.height;
const maxX = Math.floor(bodyWidth / circleSize);
const maxY = Math.floor(bodyHeight / circleSize);
for (let y = 0; y < maxY; y++) {
for (let x = 0; x < maxX; x++) {
context.fillStyle = circleColor;
context.beginPath();
context.arc(x * circleSize * 2 + circleSize, y * circleSize * 2 + circleSize, circleSize, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
}
}
}
2. Math.random()
paint()
.
// CSS
body {
width: 200px;
height: 200px;
background-image: paint(random);
}
// JS
function getRandomHexColor() {
return '#'+ Math.floor(Math.random() * 16777215).toString(16)
}
class Random {
paint(context, canvas) {
const color1 = getRandomHexColor();
const color2 = getRandomHexColor();
const gradient = context.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, color1);
gradient.addColorStop(1, color2);
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
}
}
registerPaint('random', Random);
, , .
, ?
. API .
, Firefox, CSS Paint API. Chrome Chromium . , .
CSS Paint API . , .
, , , .
.
, ( ).
, (polyfill) , Firefox, CSS Painting API.
. !
"JavaScript Developer. Professional".