HTML5 Canvas Birleşik İşlemler

HTML5 Canvas ile bileşik bir işlem gerçekleştirmek için canvas içeriğinin globalCompositeOperation özelliğini kullanabiliriz. Bu özellik, tuvalin kaynak ve hedef durumları arasındaki karma işlemi tanımlar. Hedef, bileşik bir işlemden önceki canvas durumu olarak tanımlanır. Kaynak, bileşik bir işlemden sonra canvas durumu olarak tanımlanır.

source-atop, source-in, source-out, source-over, destination-atop, destination-in, destination-out, destination-over, lighter, xor, ve copy dahil olmak üzere on iki bileşik işlemden birini gerçekleştirebiliriz. Aksi belirtilmedikçe, varsayılan bileşik işlem source-over gerçekleştirilir.

Bir tuval içeriğinin kullanım ömrü boyunca yalnızca bir kompozit işlemi destekleyebileceğini bilmek önemlidir. Birden fazla bileşik işlem kullanmak istiyorsak, bu eğitimde olduğu gibi, işlemleri gizli bir tuval üzerine uygulamamız ve sonuçları görünür bir tuval üzerine kopyalamamız gerekir.

Çıktı:

Kod:


        <canvas id="canvas" width="578" height="430"></canvas>
        <canvas id="tempCanvas" width="578" height="430" style="display:none;"></canvas>
        <script>
          var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');
          var tempCanvas = document.getElementById('tempCanvas');
          var tempContext = tempCanvas.getContext('2d');
    
          var kareGenislik = 55;
          var daireCap = 35;
          var sekilOffset = 50;
          var islemOffset = 150;
          var arr = [];
    
          arr.push('source-atop');
          arr.push('source-in');
          arr.push('source-out');
          arr.push('source-over');
          arr.push('destination-atop');
          arr.push('destination-in');
          arr.push('destination-out');
          arr.push('destination-over');
          arr.push('lighter');
          arr.push('darker');
          arr.push('xor');
          arr.push('copy');
    
          // 10px dolgu eklemek için bağlamı döndürür
          context.translate(10, 10);
    
          // şlemlerin her birini çizin
          for(var n = 0; n < arr.length; n++) {
            var thisOperation = arr[n];
    
            tempContext.save();
            
            // tempcontext i temizle
            tempContext.clearRect(0, 0, canvas.width, canvas.height);
    
            // hedefe rectangle çizin
            tempContext.beginPath();
            tempContext.rect(0, 0, kareGenislik, kareGenislik);
            tempContext.fillStyle = '#00b894';
            tempContext.fill();
    
            // küresel bileşik oluştur
            tempContext.globalCompositeOperation = thisOperation;
    
            // kaynağa daire çiz
            tempContext.beginPath();
            tempContext.arc(sekilOffset, sekilOffset, daireCap, 0, 2 * Math.PI, false);
            tempContext.fillStyle = '#d63031';
            tempContext.fill();
            tempContext.restore();
    
            // yazıyı çiz
            tempContext.font = '10pt Verdana';
            tempContext.fillStyle = 'black';
            tempContext.fillText(thisOperation, 0, kareGenislik + 45);
    
            // görünür içeriği çevirerek işlem doğru yere çizilir
            if(n > 0) {
              if(n % 4 === 0) {
                context.translate(islemOffset * -3, islemOffset);
              }
              else {
                context.translate(islemOffset, 0);
              }
            }
    
            // tempCanvas'tan çizimi tuvalin üzerine kopyala
            context.drawImage(tempCanvas, 0, 0);
          }
        </script>

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var tempCanvas = document.getElementById('tempCanvas');

var tempContext = tempCanvas.getContext('2d');

var kareGenislik = 55;

var daireCap = 35;

var sekilOffset = 50;

var islemOffset = 150;

var arr = [];

arr.push('source-atop');

arr.push('source-in');

arr.push('source-out');

arr.push('source-over');

arr.push('destination-atop');

arr.push('destination-in');

arr.push('destination-out');

arr.push('destination-over');

arr.push('lighter');

arr.push('darker');

arr.push('xor');

arr.push('copy');

// 10px dolgu eklemek için bağlamı döndürür

context.translate(10, 10);

// şlemlerin her birini çizin

for(var n = 0; n < arr.length; n++) {

var thisOperation = arr[n];

tempContext.save();

// tempcontext i temizle

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

// hedefe rectangle çizin

tempContext.beginPath();

tempContext.rect(0, 0, kareGenislik, kareGenislik);

tempContext.fillStyle = '#00b894';

tempContext.fill();

// küresel bileşik oluştur

tempContext.globalCompositeOperation = thisOperation;

// kaynağa daire çiz

tempContext.beginPath();

tempContext.arc(sekilOffset, sekilOffset, daireCap, 0, 2 * Math.PI, false);

tempContext.fillStyle = '#d63031';

tempContext.fill();

tempContext.restore();

// yazıyı çiz

tempContext.font = '10pt Verdana';

tempContext.fillStyle = 'black';

tempContext.fillText(thisOperation, 0, kareGenislik + 45);

// görünür içeriği çevirerek işlem doğru yere çizilir

if(n > 0) {

if(n % 4 === 0) {

context.translate(islemOffset * -3, islemOffset);

}

else {

context.translate(islemOffset, 0);

}

// tempCanvas'tan çizimi tuvalin üzerine kopyala

context.drawImage(tempCanvas, 0, 0);

}

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Birleşik İşlemler

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap