2011-12-03 9 views
5

Tuval HTML5 hakkında bilmek istiyorum. Temel tuval öğemde arka plan resmi ayarlamak istiyorum ve bunun üzerine boya gibi bazı işlevleri gerçekleştirmek istiyorum Sil, Geri Al, Temizle ve bu efekti görüntüyü kaydet (tüm efekti uyguladıktan sonra, temizle). Herhangi bir öneri ya da örnek ..Arka plan resmini tuval HTML5'te ayarlamak mümkün ve Geri Al, Sil, Sil, Arka plan resmini kaydet gibi bazı boya işlevselliği yapabilir mi?

+0

[HTML5 Canvas arka plan alanını kaydet/geri yükle] (http://stackoverflow.com/questions/4858187/save-restore-background-area-of-html5-canvas) ve/veya [Tuval Rect'i temizle ancak Backgrond tutun) (http://stackoverflow.com/questions/5596434/clear-canvas-rect-but-keep-background). – Phrogz

cevap

1

En kolay ve en iyi performans, bu arka planı tuvalin arkasında bir div olarak koymak olabilir.

+0

Ama bana nasıl pratik bir şekilde söyleyebilirsin? –

4

DrawImage() öğesini kullanarak arka planı tuvale çizebilirsiniz. Tüm diğer Manipülasyonlar, Resmin üstüne basılmıştır.

İşinizi bitirdiğinizde Canvasstate'ınızı bir Resme Aktarabilirsiniz.

Ancak, tüm görev için bir Geçmiş Tutmanız gerekir, çünkü tuval doğrudan değiştirilir.

Kaydet ve geri yükleme yöntemi yararlı olabilir.

Görüntüyü önce tuvale çizmeniz önemlidir, böylece diğer tüm efektler resmi etkileyecektir.

+0

Geri alma işlemini yaptıktan sonra, temizledikten sonra (kalem n rengi ile), bu görüntüyü kaydettiğimde, bu görüntüyü elde edemiyorum, varsayılan resimdeki beyaz arka planı kaydettim ve bazıları bu tuval üzerine çizdim. Ancak gerçekte tuvalde 'backgroundImage': 'url (./ tmp/Koala.jpg)' olarak ayarlayın. Bunu yaptığım tüm efektlerle kaydedilmiş görüntü olarak istiyorum (geri al, çiz, net) –

0

history API geri alma ve yineleme için kullanılabilir. Tuval nesnesinin yönteminin bir resmi kaydetmek için kullanılabilir.

İlgili konular