«canvas» etiketlenmiş sorular

HTML5 üzerine metin yazmak mümkün müdür canvas?

154 html  canvas 

Harita Perlin gürültü yükseklik haritalarını kullanarak, ardından gürültünün yüksekliğine göre bir döşeme türü atayarak Javascript ile bir çini tabanlı RPG yapıyorum. Haritalar bunun gibi bir şeye benziyor (mini harita görünümünde). Görüntüdeki her pikselden renk değerini ayıklayan ve kiremit sözlüğünde bir döşemeye karşılık gelen (0-255) arasındaki konumuna bağlı olarak bir tamsayıya …

153 javascript  html  algorithm  canvas 

Spesifikasyonun, o metni yazdırmak için ne kadar genişliğe ihtiyaç duyacağını size söyleyen bir context.measureText (metin) işlevi vardır, ancak ne kadar uzun olduğunu bulmanın bir yolunu bulamıyorum. Yazı tipine dayandığını biliyorum, ancak bir yazı tipi dizesini metin yüksekliğine dönüştürmeyi bilmiyorum.

153 javascript  text  canvas 

Görünümün genişliği ve yüksekliğinin% 100'ünü kaplayan bir tuval öğesi oluşturmaya çalışıyorum. Benim örnekte görebileceğiniz burada ancak Chrome ve Firefox hem de kaydırma çubukları ekleyerek olur gerçekleşiyor. Ekstra kaydırma çubuklarını nasıl önleyebilirim ve sadece pencerenin genişliğini ve yüksekliğini tuvalin boyutu olarak nasıl sağlayabilirim?

151 jquery  html  canvas  viewport 

Tarayıcımdaki resimleri yeniden boyutlandırmak için html5 tuval öğelerini kullanıyorum. Kalitenin çok düşük olduğu ortaya çıkıyor. Bunu buldum: Bir <canvas> 'ı Ölçeklerken İnterpolasyonu Devre Dışı Bırakın, ancak kaliteyi artırmaya yardımcı olmaz. Aşağıda css ve js kodumun yanı sıra Photoshop ile aranan ve canvas API'sinde ölçeklenen görüntü var. Tarayıcıda bir görüntüyü ölçeklerken …

149 javascript  css  html  canvas  html5-canvas 

Şu anda bir HTML5 web uygulaması / Phonegap yerel uygulaması oluşturuyorum ve tuvalimi bir görüntü olarak nasıl kaydedeceğimizi anlayamıyorum canvas.toDataURL(). Biri bana yardım edebilir mi? İşte kod, sorun ne? // Tuvalime "canvasSignature" adı verildi JavaScript: function putImage() { var canvas1 = document.getElementById("canvasSignature"); if (canvas1.getContext) { var ctx = canvas1.getContext("2d"); var …

141 javascript  html  cordova  canvas  save 

Sadece dikdörtgeni doldurabildiğini, ancak yuvarlak köşeli bir tane olmadığını buldum, bunu nasıl yapabilirim?

140 html  canvas 

Görünüşe göre requestAnimationFrameşimdi olayları canlandırmanın fiili yolu. Çoğunlukla benim için oldukça iyi çalıştı, ama şu anda bazı tuval animasyonları yapmaya çalışıyorum ve merak ediyordum: Belirli bir fps'de çalıştığından emin olmanın herhangi bir yolu var mı? RAF'ın amacının sürekli olarak pürüzsüz animasyonlar olduğunu anlıyorum ve animasyonumu dalgalı hale getirme riski taşıyabilirim, …

140 javascript  performance  animation  canvas  requestanimationframe 

Tarayıcının HTML5 <canvas>etiketini desteklemediği durumlarla başa çıkmanın standart yolu , aşağıdakiler gibi bazı yedek içerikleri yerleştirmektir: <canvas>Your browser doesn't support "canvas".</canvas> Ancak sayfanın geri kalanı aynı kalır, bu uygunsuz veya yanıltıcı olabilir. Tuvalimin desteklenmediğini tespit etmenin bir yolunu istiyorum, böylece sayfamın geri kalanını buna göre sunabilirim. Ne önerirsiniz?

139 javascript  html  canvas  progressive-enhancement  graceful-degradation 

Bir çizim uygulaması için, fare hareket koordinatlarını bir diziye kaydedip ardından lineTo ile çiziyorum. Ortaya çıkan çizgi düzgün değil. Toplanan tüm noktalar arasında nasıl tek bir eğri oluşturabilirim? Googledim ancak çizgi çizmek için yalnızca 3 işlev buldum: 2 örnek nokta için kullanın lineTo. 3 numune noktası quadraticCurveToiçin 4 numune noktası …

133 javascript  canvas  html5-canvas  bezier  spline 

Bir SVG dosyasını HTML5 tuvaline çizmenin varsayılan bir yolu var mı? Google Chrome, SVG'yi bir resim olarak yüklemeyi (ve yalnızca kullanmayı drawImage) destekler, ancak geliştirici konsolu bunu uyarır resource interpreted as image but transferred with MIME type image/svg+xml. SVG'yi tuval komutlarına dönüştürmek için bir olasılık olduğunu biliyorum ( bu soruda …

131 html  canvas  svg 

Bir tuvalin TÜM içeriğini kopyalayıp istemci tarafında diğerine aktarmak istiyorum. Bunu uygulamak için canvas.toDataURL()ve context.drawImage()yöntemini kullanacağımı düşünürdüm ama birkaç sorunla karşılaşıyorum. Benim çözümüm, bunu Canvas.toDataURL()Javascript'teki bir Image nesnesine alıp depolamak ve ardından context.drawImage()geri yerleştirmek için yöntemi kullanmak olacaktır. Bununla birlikte, toDataURLyöntemin "data:image/png;base64,"başına eklenen 64 bit kodlanmış bir etiket döndürdüğüne inanıyorum …

129 html  canvas 

Deneyimli bir Java programcısıyım, ancak yaklaşık on yıldır ilk kez bazı JavaScript / HTML5 şeylerine bakıyorum. Şimdiye kadarki en basit şeyin ne olması gerektiğine tamamen şaşırdım. Örnek olarak bir şey çizmek ve ona bir olay işleyicisi eklemek istedim. Eminim aptalca bir şey yapıyorum, ama her yerde aradım ve önerilen hiçbir …

128 javascript  html  canvas  event-handling  onclick 

NOT : Bu nasıl bir ilgisi vardır büyütülüyor zaman mevcut tuval elemanları oluşturulur , değil çizgiler veya grafik render nasıl bir ilgisi bir tuval yüzeyine . Başka bir deyişle, bu işle her şeye sahiptir interpolasyon ait ölçekli elemanları ve alakası yoktur antialiasing grafik bir tuvale çizilmiş olma. Tarayıcının çizgileri nasıl …

126 javascript  html  canvas 

Bir tuvali nasıl şeffaf yapabilirim? Yapmam gerek çünkü iki tuvali üst üste koymak istiyorum.

123 html  canvas