«html5-canvas» etiketlenmiş sorular

Kompozit işlemleri denedikten ve tuval üzerine görüntü çizdikten sonra, şimdi görüntüleri kaldırmaya ve birleştirmeye çalışıyorum. Bunu nasıl yaparım? Diğer görüntüleri yeniden çizmek için tuvali temizlemem gerekiyor; Bu bir süre devam edebilir, bu yüzden her seferinde yeni bir dikdörtgen çizmenin en verimli seçenek olacağını düşünmüyorum.

1012 javascript  html  canvas  html5-canvas  composite 

Anında öğeler oluşturmak ve onları hareket ettirmek için en iyi yaklaşım nedir? Örneğin, bir dikdörtgen, daire ve çokgen oluşturmak ve sonra bu nesneleri seçmek ve hareket ettirmek istediğimi varsayalım. HTML5'in bunu mümkün kılabilecek üç öğe sağladığını anlıyorum: svg , canvas ve div . Ne yapmak istediğim için, bu unsurlardan hangisi …

476 javascript  html  svg  html5-canvas 

HTML5 <canvas>öğesini sayfaya sığacak şekilde otomatik olarak nasıl ölçekleyebilirim ? Örneğin <div>, heightve widthözelliklerini% 100 olarak ayarlayarak ölçeklendirmeyi alabilirim , ancak <canvas>ölçeklenmeyecek mi?

400 javascript  html  html5-canvas 

Kullanıcıların ortaya çıkan görüntüleri bir algoritmadan kaydetmelerine izin vermek istediğim, üretken bir sanat projesi üzerinde çalışıyorum. Genel fikir: Üretken bir algoritma kullanarak HTML5 Canvas'ta görüntü oluşturma Görüntü tamamlandığında, kullanıcıların tuvali bir görüntü dosyası olarak sunucuya kaydetmesine izin verin Kullanıcının görüntüyü indirmesine veya algoritmayı kullanarak oluşturulan parça galerisine eklemesine izin verin. …

261 javascript  php  ajax  html5-canvas 

Ortalanmış bir kelimeden oluşan bir web sayfam olmasını istiyorum. Bu kelimenin bir animasyonla çizilmesini istiyorum, böylece sayfa kelimeyi yaptığımız gibi "yazıyor", yani bir noktada başlıyor ve sonuçta bir glif olacak şekilde zaman içinde çizgiler ve eğriler çiziyor. Bunun <canvas>DOM ile mi yoksa DOM ile mi yapıldığı umurumda değil ve JavaScript …

229 javascript  css  canvas  html5-canvas  css-shapes 

Tuval çizimlerini PNG görüntülerine dönüştürmek için Nihilogic'in "Canvas2Image" JavaScript aracını kullanıyorum. Şimdi ihtiyacım olan bu aracın oluşturduğu base64 dizelerini PHP kullanarak sunucudaki gerçek PNG dosyalarına çevirmektir. Kısacası, şu anda yaptığım şey Canvas2Image kullanarak istemci tarafında bir dosya oluşturmak, daha sonra base64 kodlu verileri almak ve AJAX kullanarak sunucuya göndermek: // …

212 php  javascript  base64  html5-canvas 

Tuvalimi bir img'e kaydetmek istiyorum. Bu işlevi var: function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } Bana hata veriyor: Yakalanmamış SecurityError: 'HTMLCanvasElement' öğesinde 'toDataURL' yürütülemedi: Boyalı tuvaller dışa aktarılamayabilir. Ne yapmalıyım?

187 javascript  html5-canvas 

Dijital kamera fotoğrafları genellikle EXIF ​​"yönlendirme" etiketi ile JPEG olarak kaydedilir. Doğru görüntülemek için, görüntülerin hangi yöne ayarlandığına bağlı olarak döndürülmesi / yansıtılması gerekir, ancak tarayıcılar görüntüyü oluşturan bu bilgileri yok sayar. Büyük ticari web uygulamalarında bile, EXIF ​​yönlendirme desteği sivilceli olabilir 1 . Aynı kaynak, bir JPEG'in sahip olabileceği …

154 javascript  rotation  html5-canvas  exif 

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 

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 

Kodum localhost'umda çok iyi çalışıyor ancak sitede çalışmıyor. Bu hatayı konsoldan aldım, bu satır için .getImageData(x,y,1,1).data: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. kodumun bir parçası: jQuery.Event.prototype.rgb=function(){ var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY - $(this.target).offset().top); …

131 javascript  html  html5-canvas 

Fotoğrafları, JPEG EXIF ​​görüntü verilerinde kamera tarafından ayarlandığı şekliyle orijinal dönüşlerine göre döndürmek istiyorum. İşin püf noktası, tüm bunların tarayıcıda JavaScript ve <canvas>. JavaScript , döndürme bilgilerini okumak için yerel bir dosya API nesnesi olan JPEG, yerel <img>veya uzak <img>, EXIF ​​verilerine nasıl erişebilir ? Sunucu tarafı yanıtları tamam değil; …

125 javascript  jpeg  exif  html5-canvas 

Tuvalimin varsayılan arka plan rengini siyahtan şeffafa / başka bir renge değiştirmeye çalışıyorum - ama şans yok. HTML'im: <canvas id="canvasColor"> CSS'im: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> Aşağıdaki çevrimiçi örnekte görebileceğiniz gibi, tuvale eklenmiş bir animasyon var, bu yüzden sadece bir opaklık yapamam: 0; kimlik …

122 css  html  canvas  html5-canvas  three.js 

2D oyunlar / uygulamalar için 2D -Canvas yerine WebGL kullanmak için performans dışında herhangi bir neden var mı ? Başka bir deyişle, WebGL tarafından 2D-Canvas ile kolayca elde edilmesi mümkün olmayan hangi 2D işlevler sunulmaktadır?

114 html  html5-canvas  webgl 

İki tuvali üst üste yığmaya ve onu çift katmanlı bir tuval yapmaya çalışıyorum. Burada bir örnek gördüm: <div style="position: relative;"> <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> </div> Ancak her iki tuvali de …

108 css  html5-canvas