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!

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.