Menghasilkan Gambar Secara Terprogram dengan CSS Painting API

API JavaScript untuk pembuatan gambar dinamis yang dikombinasikan dengan CSS

Untuk siswa masa depan kursus "Pengembang JavaScript. Profesional" menyiapkan terjemahan materi.



Kami juga mengundang Anda untuk mengunjungi webinar terbuka dengan topik "Vue 3 - kemampuan versi baru dari salah satu kerangka kerja front-end paling populer . " Dalam pelajaran ini, para peserta, bersama dengan seorang ahli:



- Mempertimbangkan perbedaan utama dalam sintaks vue2 dari vue3;

- akan memahami cara bekerja dengan vue-router dan VueX di versi baru kerangka kerja;

- coba buat proyek Vue 3 dari awal menggunakan Vue-cli.



Bergabunglah dengan kami!

---

. , , . , , , . , .

« », 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 — ».