Bu her zaman sizsiniz, Canvas2D

Aaron Krajeski

Gölgelendiriciler, ağlar ve filtreler dünyasında Canvas2D sizi heyecanlandırmayabilir. Ancak bu şekilde olmalıdır. Web sayfalarının% 30-40'ında bir <canvas> öğesi bulunur ve tüm kanvasların% 98'inde Canvas2D oluşturma bağlamı kullanılır. Canvas2D'ler arabalarda, buzdolaplarında ve uzayda (gerçekten) bulunur.

API'nin, en son teknoloji 2D çizim konusunda biraz geride olduğu kabul edilmelidir. Neyse ki CSS'ye yetişmek, ergonomiyi kolaylaştırmak ve performansı artırmak için Canvas2D'de yeni özellikler uygulamak üzere yoğun bir şekilde çalışıyoruz.

1. Bölüm: CSS'yi yakalama

CSS'de, Canvas2D'de eksik olan birkaç çizim komutu vardır. Yeni API ile en çok istenen özelliklerden birkaçını ekledik:

Yuvarlak dikdörtgen

Köşeleri yuvarlatılmış dikdörtgenler: İnternetin, bilgisayarcılığın ve hatta uygarlığın temel taşı.

Yuvarlatılmış dikdörtgenler, düğme, sohbet balonu, küçük resim, konuşma balonu gibi birçok alanda son derece kullanışlıdır. Canvas2D'de yuvarlatılmış dikdörtgen oluşturmak her zaman mümkündü, ancak bu işlem biraz karmaşıktı:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'magenta';

const top = 10;
const left = 10;
const width = 200;
const height = 100;
const radius = 20;

ctx.beginPath();
ctx.moveTo(left + radius, top);
ctx.lineTo(left + width - radius, top);
ctx.arcTo(left + width, top, left + width, top + radius, radius);
ctx.lineTo(left + width, top + height - radius);
ctx.arcTo(left + width, top + height, left + width - radius, top + height, radius);
ctx.lineTo(left + radius, top + height);
ctx.arcTo(left, top + height, left, top + height - radius, radius);
ctx.lineTo(left, top + radius);
ctx.arcTo(left, top, left + radius, top, radius);
ctx.stroke();

Basit ve yuvarlatılmış bir dikdörtgen için tüm bunlar gerekliydi:

Yeni API'de roundRect() yöntemi vardır.

ctx.roundRect(upper, left, width, height, borderRadius);

Bu nedenle, yukarıdaki kod tamamen şu şekilde değiştirilebilir:

ctx.roundRect(10, 10, 200, 100, 20);

ctx.roundRect() yöntemi, borderRadius bağımsız değişkeni için dört adede kadar sayı içeren bir dizi de alır. Bu yarıçaplar, yuvarlatılmış dikdörtgenin dört köşesini CSS'de olduğu gibi kontrol eder. Örneğin:

ctx.roundRect(10, 10, 200, 100, [15, 50, 30]);

Demoyu inceleyerek deneyebilirsiniz.

Konik Gradyan

Doğrusal renk geçişlerini gördünüz:

const gradient = ctx.createLinearGradient(0, 0, 200, 100);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.5, 'magenta');
gradient.addColorStop(1, 'white');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

Dairesel renk geçişleri:

const radialGradient = ctx.createRadialGradient(150, 75, 10, 150, 75, 70);
radialGradient.addColorStop(0, 'white');
radialGradient.addColorStop(0.5, 'magenta');
radialGradient.addColorStop(1, 'lightblue');

ctx.fillStyle = radialGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

Peki güzel bir konik gradyan nasıl olur?

const grad = ctx.createConicGradient(0, 100, 100);

grad.addColorStop(0, 'red');
grad.addColorStop(0.25, 'orange');
grad.addColorStop(0.5, 'yellow');
grad.addColorStop(0.75, 'green');
grad.addColorStop(1, 'blue');

ctx.fillStyle = grad;
ctx.fillRect(0, 0, 200, 200);

Metin değiştiriciler

Canvas2D'nin metin oluşturma özellikleri çok geride kaldı. Chrome, Canvas2D metin oluşturmaya birkaç yeni özellik ekledi:

• ctx.letterSpacing
• ctx.wordSpacing
• ctx.fontVariant
• ctx.fontKerning
• ctx.fontStretch
• ctx.textDecoration
• ctx.textUnderlinePosition
• ctx.textRendering

Bu özelliklerin tümü, aynı ada sahip CSS karşılıklarıyla eşleşir.

2. Bölüm: ergonomik düzenlemeler

Daha önce Canvas2D ile bazı işlemler yapılabiliyordu ancak bunların uygulanması gereksiz yere karmaşıktı. Canvas2D kullanmak isteyen JavaScript geliştiricileri için bazı yaşam kalitesi iyileştirmeleri aşağıda verilmiştir:

Bağlam sıfırlama

Bir kanvası temizlemeyi açıklamak için retro bir desen çizen küçük ve saçma bir işlev yazdım:

draw90sPattern();

Mükemmel! Bu deseni tamamladığıma göre tuvali temizleyip başka bir şey çizmek istiyorum. Bir kanvası nasıl temizleriz? Evet. ctx.clearRect(), elbette.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Bu işlem çalışmadı. Evet. Öncelikle dönüşümü sıfırlamamız gerekiyor:

ctx.resetTransform();
ctx.clearRect(0, 0, canvas.width, canvas.height);

Mükemmel! Güzel bir boş tuval. Şimdi güzel bir yatay çizgi çizmeye başlayalım:

ctx.moveTo(10, 10);
ctx.lineTo(canvas.width, 10);
ctx.stroke();

Hırrrr! Bu doğru değil. 😡 Bu ek satırın burada ne işi var? Ayrıca, neden pembe? Tamam, StackOverflow'u kontrol edelim.

canvas.width = canvas.width;

Bu neden çok saçma? Bu neden bu kadar zor?

Artık değil. Yeni API ile basit, zarif ve güzel bir yeniliğe sahip olduk:

ctx.reset();

Bu kadar uzun sürdüğü için özür dileriz.

Filtreler

SVG filtreleri başlı başına bir dünyadır. SVG filtreleri sizin için yeniyse SVG Filtrelerinin Sanatı ve Neden Muhteşem Olduğu başlıklı makaleyi okumanızı öneririz. Bu makalede, SVG filtrelerinin şaşırtıcı potansiyelinden bazıları gösterilmektedir.

SVG stil filtreleri Canvas2D için kullanıma sunuldu. Filtreyi, sayfadaki başka bir SVG filtresi öğesine işaret eden bir URL olarak iletmeniz yeterlidir:

<svg>
  <defs>
    <filter id="svgFilter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
      <feConvolveMatrix kernelMatrix="-3 0 0 0 0.5 0 0 0 3" />
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
  </defs>
</svg>

const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 400;
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

ctx.filter = "url('#svgFilter')";
draw90sPattern(ctx);

Bu da kalıbımızı oldukça bozar:

Ancak yukarıdakileri yapmak istiyorsanız ancak JavaScript'te kalmak ve dizelerle uğraşmak istemiyorsanız ne yapabilirsiniz? Yeni API ile bu tamamen mümkündür.

ctx.filter = new CanvasFilter([
  { filter: 'gaussianBlur', stdDeviation: 5 },
  {
    filter: 'convolveMatrix',
    kernelMatrix: [
      [-3, 0, 0],
      [0, 0.5, 0],
      [0, 0, 3],
    ],
  },
  { filter: 'colorMatrix', type: 'hueRotate', values: 90 },
]);

Bu kadar kolay. Bu demodaki parametrelerle oynayarak deneyebilirsiniz.

3. Bölüm: Performans iyileştirmeleri

Yeni Canvas2D API ile mümkün olduğunda performansı da iyileştirmek istedik. Geliştiricilerin web siteleri üzerinde daha ayrıntılı kontrol sahibi olmasını sağlamak ve mümkün olan en akıcı kare hızlarını sunmak için birkaç özellik ekledik:

Sık sık okuyacak

Bir kanvastaki piksel verilerini geri okumak için getImageData() işlevini kullanın. Bu işlem çok yavaş olabilir. Yeni API, bir kanvası tekrar okumak için açıkça işaretlemenize olanak tanır (ör. üretken efektler için). Bu sayede, arka planda optimizasyon yapabilir ve kanvası daha fazla kullanım alanı için hızlı tutabilirsiniz. Bir süredir Firefox'ta bulunan bu özelliği artık kanvas spesifikasyonunun bir parçası haline getiriyoruz.

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d', { willReadFrequently: true });

Bağlam kaybı

Üzgün sekmeleri tekrar mutlu edelim. Bir istemcinin GPU belleği tükenirse veya tuvalinizde başka bir felaket meydana gelirse artık geri arama alabilir ve gerektiği gibi yeniden çizebilirsiniz:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('contextlost', onContextLost);
canvas.addEventListener('contextrestored', redraw);

Tuval bağlamı ve kaybı hakkında daha fazla bilgi edinmek istiyorsanız WHATWG'nin wiki'sinde iyi bir açıklama bulabilirsiniz.

Sonuç

Canvas2D'de yeniyseniz, Canvas2D'yi yıllardır kullanıyorsanız veya yıllardır kullanmaktan kaçınıyorsanız Canvas'a tekrar göz atmanızı öneriyoruz. Bu, her zaman yanınızda olan bir API'dir.