Programmgesteuertes Generieren von Bildern mit der CSS Painting API

JavaScript-API für die dynamische Bilderstellung in Kombination mit CSS

Für zukünftige Studenten des Kurses "JavaScript Developer. Professional" wurde eine Übersetzung des Materials vorbereitet.



Wir laden Sie außerdem ein, das offene Webinar zum Thema "Vue 3 - Die Funktionen der neuen Version eines der beliebtesten Front-End-Frameworks" zu besuchen . In der Lektion



besprechen die Teilnehmer zusammen mit einem Experten: - die wichtigsten Unterschiede in der Syntax von vue2 von vue3;

- wird verstehen, wie man mit Vue-Router und VueX in der neuen Version des Frameworks arbeitet;

- Versuchen Sie, mit Vue-cli ein Vue 3-Projekt von Grund auf neu zu erstellen.



Begleiten Sie uns!

---

. , , . , , , . , .

« », 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 (Github).

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 .

, , .

View in Editor ( )

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".

«Vue 3 — ».