Tarayıcıda Paint API ile Dinamik Çizimler: JavaScript Olsa da Olmayan Bir Çözüm
Çok işlevsel, yeniden kullanılabilir çizimler yaratmak için çoğu geliştirici JavaScript’e başvuruyor. Ancak, CSS Houdini Paint API ile *sadece CSS* kullanarak tarayıcıda doğrudan çizimler yapmaktan daha fazlasını aynı anda elde edebilirsiniz. Bu postta, Paint API'nin temelini atıp örnek bir uygulama üzerinden nasıl hayata geçirildiğini göstereceğim – tüm kodlar tek KiB içinde gizleniyor!
Houdini Paint API nedir?
*Houdini* bir grup CSS API'sidir (trickster, Layout, Paint, SMIL). Paint API, JavaScript'ten ayık, *canvas'ı GPU üzerinden çizmeyi sağlayan, pencere **`paintWorklet`** içinde çalışır.*
```js
// worklet.js
registerPaint('hexagon', class {
paint(ctx, geom, style) {
const {width, height} = geom;
const size = Math.min(width, height) * 0.8;
ctx.save();
ctx.translate(width/2, height/2);
ctx.beginPath();
for(let i=0;i<6;i++){
const ang=i*Math.PI/3;
ctx.lineTo(Math.cos(ang)*size, Math.sin(ang)*size);
}
ctx.closePath();
ctx.fillStyle = style.getPropertyValue('--color') || '#3498db';
ctx.fill();
ctx.restore();
}
});
```
Daha sonra HTML/CSS üzerinden şu şekilde kullanabilirsiniz:
```css
@support: paint(hexagon);
.square {background: paint(hexagon);}
```
Oluşturduğumuz bu `hexagon` iş parçacığını gezinti içinde dinamik olarak, CSS değişkenleri ile de renk değiştirin!
Performans Neyi Artırır?
* Paint API, tarayıcıya çizimleri GPU üzerinde gerçekleştirmesini söyler, bu sayede JavaScript döngüleriyle yarattığınız çizimlerden çok daha hızlıdır.
* Üçüncü taraf kütüphaneleri (SVG, Canvas API) için geçişi ortadan kaldırır – aynı sonuçları netsensörlük içinde elde edebilirsiniz.
Kaynakça & İleri Okuma
* https://drafts.css-houdini.org/paint-api/
* MDN: Paint Worklets
* “Getting Started with Houdini” video serisi
Sonuç
Paint API, klasik JavaScript tabanlı çizim yollarını aşırı basitleştiriyor. Tek bir *Worklet* dosyası ve birkaç CSS satırı yeterli. Ödevinizde animasyonlu arka plan, ikon setleri ya da hatta interaktif grafikler eklemek istiyorsanız, Houdini işte gönül rahatlığıyla kullanabileceğiniz bir büyücüdür.
