Tuval oyunu yapıyorum. Bu durumda arka plan resmini bir döngüde kaydırmak istiyorum. Javascript kullanarak bunu nasıl yapacağımı bilmiyorum. Sürekli arka plana kayan tek bir görüntü kullanacağım. Şimdiden teşekkürler.html5 tuvalinde kaydırma/kaydırma arka planı
cevap
Bunu gerçekleştirmenin birkaç yolu, putImageData
kullanarak bir performans isabeti alacaktır, ikinci yöntem sadece drawImage
kullanır. Ayrıca, 2. yöntemin, soldan sağa veya sağdan sola gitmesini sağlayan kodu vardır.
http://www.somethinghitme.com/projects/bgscroll/
var ctx = document.getElementById("canvas").getContext("2d"),
canvasTemp = document.createElement("canvas"),
scrollImg = new Image(),
tempContext = canvasTemp.getContext("2d"),
imgWidth = 0,
imgHeight =0,
imageData = {},
canvasWidth = 600,
canvasHeight = 240,
scrollVal = 0,
speed =2;
scrollImg.src = "citybg.png";
scrollImg.onload = loadImage;
function loadImage(){
imgWidth = scrollImg.width,
imgHeight = scrollImg.height;
canvasTemp.width = imgWidth;
canvasTemp.height = imgHeight;
tempContext.drawImage(scrollImg, 0,0, imgWidth, imgHeight);
imageData = tempContext.getImageData(0,0,imgWidth,imgHeight);
render();
}
function render(){
ctx.clearRect(0,0,canvasWidth,canvasHeight);
if(scrollVal >= canvasWidth-speed){
scrollVal = 0;
}
scrollVal+=speed;
// This is the bread and butter, you have to make sure the imagedata isnt larger than the canvas your putting image data to.
imageData = tempContext.getImageData(canvasWidth-scrollVal,0,scrollVal,canvasHeight);
ctx.putImageData(imageData, 0,0,0,0,scrollVal, imgHeight);
imageData = tempContext.getImageData(0,0,canvasWidth-scrollVal,canvasHeight);
ctx.putImageData(imageData, scrollVal,0,0,0,canvasWidth-scrollVal, imgHeight);
setTimeout(function(){render();},10);
}
2 Yöntem sadece aşağıdakilere Bu iki işlevi değiştirmek Yukarıdaki aynı kodu kullanır.
function loadImage(){
imgWidth = scrollImg.width,
imgHeight = scrollImg.height;
canvasTemp.width = imgWidth;
canvasTemp.height = imgHeight;
render();
}
function render(){
ctx.clearRect(0,0,canvasWidth,canvasHeight);
if(scrollVal >= canvasWidth){
scrollVal = 0;
}
scrollVal+=speed;
ctx.drawImage(scrollImg,canvasWidth-scrollVal,0,scrollVal,imgHeight, 0, 0, scrollVal,imgHeight);
ctx.drawImage(scrollImg,scrollVal,0,imgWidth, imgHeight);
// To go the other way instead
ctx.drawImage(scrollImg,-scrollVal,0,imgWidth, imgHeight);
ctx.drawImage(scrollImg,canvasWidth-scrollVal,0,imgWidth, imgHeight);
setTimeout(function(){render();},10);
}
Merhaba Loktar, cevabınız için teşekkürler. Bana yönünü nasıl tersine çevirebileceğinizi söyler misiniz (sağdan sola). Denedim ama başarı yok. – rgolekar
@ user1451031 Cevabımı düzenledim ve ikinci yönteme daha iyi performans gösteren ikinci yöntem olduğundan dolayı diğer yönteme geçmek için ikinci yönteme ekledim. – Loktar
@ Loktar çok teşekkürler. Günümü kurtardın :) – rgolekar
- 1. HTML5 tuvalinde anaglif 3D görüntü oluşturma
- 2. WP7 simgesinin arka planı
- 3. Pencerenin arka planı değiştirilemiyor
- 4. alertDialog arka planı saydam
- 5. Firefox'ta SVG arka planı
- 6. Alert ÇıkarmaDialog arka planı
- 7. HTML5 tuvalinde vsync geri arama nasıl alabilirim?
- 8. Bir html5 tuvalinde daire sektörü nasıl çizilir?
- 9. Fayans kullanılarak html5 tuvalinde görünen istenmeyen çizgiler
- 10. HTML5 tuvalinde resmin üzerine metin nasıl yazılır?
- 11. Başvuru ekranı aynı arka planı
- 12. Etkinlik arka planı siyah oluyor!
- 13. Görüntünün Arka Planı olarak ayarlanması
- 14. UserControl Animate Button'ın Arka Planı
- 15. Saydam arka planı ayarlama Win32
- 16. HTML5'in tuvalinde kısmen bir yol nasıl çizilir?
- 17. HTML5 tuvalinde animasyonla göz kırpmak için bir ifade animasyonu
- 18. HTML5 tuvalinde yarım piksel çizmekten kaçınmak hızını artırır mı?
- 19. angular-nvd3 grafik arka planı rengini değiştirme
- 20. Video.js kullanarak tam video arka planı
- 21. Android'de klavye arka planı nasıl ayarlanır
- 22. Düzenleme başladığında UITextField arka planı değiştir
- 23. url() işlevi HTML arka planı için
- 24. UITableViewCell'in beyaz arka planı nasıl kaldırılır
- 25. Flexbox arka planı yatay taşmadaki çocukları kapsamaz.
- 26. WPF DataGrid hücre arka planı bağlama kullanılarak
- 27. iPhone UITableView masa boşken görüntü arka planı
- 28. PreferenceActivity arka planı, Alt Tercihler Ekranına uygulanmadı
- 29. Sadece DataGridView'ın hücre arka planı nasıl değil?
- 30. Android Honeycomb CheckBox beyaz arka planı görülemiyor
http://www.somethinghitme.com/projects/bgscroll/scrolldrawimage.html
Ben sürekli bir görüntü slayt emin değilim - Sen kenarlarında sorunsuz katılmak iki yarısını slayt. – Widor@Coulton, jQuery'yi kullanmak için bir neden yok, tuval ile hiçbir şey yapmaz. – Loktar
@Widor Bir görüntüyü kesinlikle kullanabilirsiniz, sadece bir kısmını tuval üzerine kopyalayıp kusursuz efekt yaratırsınız. – Loktar