SORU
1 Mart 2010, PAZARTESİ


Nasıl saydamlık (alfa, şeffaflık çizilmiş edildikten sonra tuval öğesi içinde bir öğe değiştirmek için?

HTML5 <canvas> öğesi kullanarak, bir görüntü dosyası (PNG, JPEG, vb.) yüklemek istiyorum tuval tamamen şeffaf ve solmaya sonra çizin. Resim yükleme ve tuvale çizmek için nasıl düşündüm, ama çizilmiş gibi bir kez opaklığı değiştirmek için nasıl bilmiyorum.

İşte şimdiye kadar sahip olduğum kodu:

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

if (canvas.getContext)
{
    var c           = canvas.getContext('2d');
    c.globalAlpha   = 0;

    var img     = new Image();
    img.onload  = function() {
        c.drawImage(img, 0, 0);
    }
    img.src     = 'image.jpg';
}

Birini ayarlamak için bir özellik gibi doğru yönde bana gelin ya da donukluk değiştirmek için bir arama işlevi mi lütfen? Teşekkürler!

CEVAP
20 NİSAN 2010, Salı


Ben de arıyorum bu sorunun cevabını (netleştirmek istiyorum edebilmek için çizmek bir görüntü ile kullanıcı tanımlı opaklık gibi nasıl sen-ebilmek çizmek şekilleri ile opaklık) eğer beraberlik ile ilkel şekilleri ayarlayabilirsiniz dolgu ve kontur renk ile alfa tanımlamak için şeffaflık. Şu an karar verdim kadarıyla bu resim çizimi etkileyecek gibi görünmüyor.

//works with shapes but not with images
canvas2d.fillStyle = "rgba(255, 255, 255, 0.5)";

Bu globalCompositeOperation ayarı görüntüleri ile çalışır olduğu sonucuna vardım.

//works with images
canvas2d.globalCompositeOperation = "lighter";

Görüntülerin renk tonu ve onları saydam kolayca yapabilmemiz için renk ayarı bir çeşit üçüncü bir yol olup olmadığını merak ediyorum.

DÜZENLEME:

Daha kazma sonra resmi çizmeden ÖNCE globalAlpha parametresini ayarlayarak görüntünün şeffaflık ayarlayabilirsiniz şu sonuca vardım:

//works with images
canvas2d.globalAlpha = 0.5

Eğer sana ulaşmak istiyorum bir solma etkisi zamanla ihtiyacın olan bir çeşit döngü bu değişiklikler alfa değeri, bu oldukça kolay bir şekilde elde edilir setTimeout fonksiyonu, bak o kadar oluşturmak için bir döngü olan alter alpha zamanla.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • 趣味そうこ♪

    趣味そう

    3 Mart 2010
  • nemoking of kinges

    nemoking of

    4 EYLÜL 2009
  • TeeMayneTV

    TeeMayneTV

    27 Kasım 2010