Als «html5-canvas» getaggte Fragen

Nachdem ich mit zusammengesetzten Operationen experimentiert und Bilder auf die Leinwand gezeichnet habe, versuche ich nun, Bilder zu entfernen und zusammenzusetzen. Wie mache ich das? Ich muss die Leinwand löschen, um andere Bilder neu zu zeichnen. Dies kann eine Weile dauern, daher denke ich...

Was ist der beste Ansatz, um Elemente im laufenden Betrieb zu erstellen und sie bewegen zu können? Angenommen, ich möchte ein Rechteck, einen Kreis und ein Polygon erstellen und dann diese Objekte auswählen und verschieben. Ich verstehe, dass HTML5 drei Elemente bietet, die dies ermöglichen können:...

Wie kann ich das HTML5- <canvas>Element automatisch an die Seite anpassen? Zum Beispiel kann ich eine <div>Skalierung erhalten, indem ich die Eigenschaften heightund widthauf 100% setze, aber eine <canvas>wird nicht skaliert,

Ich arbeite an einem generativen Kunstprojekt, bei dem ich Benutzern ermöglichen möchte, die resultierenden Bilder von einem Algorithmus zu speichern. Die allgemeine Idee ist: Erstellen Sie ein Bild auf einem HTML5-Canvas mithilfe eines generativen Algorithmus Wenn das Bild fertig ist, können...

Ich möchte eine Webseite mit einem zentrierten Wort haben. Ich möchte, dass dieses Wort mit einer Animation gezeichnet wird, so dass die Seite das Wort auf die gleiche Weise "schreibt", wie wir es tun würden, dh es beginnt an einem Punkt und zeichnet im Laufe der Zeit Linien und Kurven, so dass das...

Ich verwende das JavaScript-Tool "Canvas2Image" von Nihilogic, um Leinwandzeichnungen in PNG-Bilder zu konvertieren. Was ich jetzt brauche, ist, die von diesem Tool generierten base64-Zeichenfolgen mithilfe von PHP in tatsächliche PNG-Dateien auf dem Server umzuwandeln. Kurz gesagt, ich generiere...

Ich möchte meine Leinwand in einem Bild speichern. Ich habe diese Funktion: function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL;

Digitalkamera-Fotos werden häufig als JPEG mit einem EXIF-Tag "Orientierung" gespeichert. Um korrekt angezeigt zu werden, müssen Bilder je nach eingestellter Ausrichtung gedreht / gespiegelt werden. Browser ignorieren diese Informationen jedoch, um das Bild zu rendern. Selbst in großen...

Ich verwende HTML5-Canvas-Elemente, um die Größe von Bildern in meinem Browser zu ändern. Es stellt sich heraus, dass die Qualität sehr gering ist. Ich habe Folgendes gefunden: Deaktivieren Sie die Interpolation beim Skalieren eines <canvas>, aber es hilft nicht, die Qualität zu...

Für eine Zeichenanwendung speichere ich die Mausbewegungskoordinaten in einem Array und zeichne sie dann mit lineTo. Die resultierende Linie ist nicht glatt. Wie kann ich eine einzelne Kurve zwischen allen gesammelten Punkten erstellen? Ich habe gegoogelt, aber ich habe nur 3 Funktionen zum...

Mein Code funktioniert auf meinem localhost sehr gut, aber auf der Site nicht. Ich habe diesen Fehler von der Konsole für diese Zeile erhalten .getImageData(x,y,1,1).data: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by...

Ich möchte Fotos basierend auf ihrer ursprünglichen Drehung drehen, wie sie von der Kamera in JPEG EXIF-Bilddaten festgelegt wurde. Der Trick ist, dass dies alles im Browser mit JavaScript und geschehen sollte <canvas>. Wie kann JavaScript auf JPEG zugreifen, ein lokales Datei-API-Objekt,...

Ich habe versucht, die Standardhintergrundfarbe meiner Leinwand von Schwarz auf Transparent / jede andere Farbe zu ändern - aber kein Glück. Mein HTML: <canvas id="canvasColor"> Mein CSS: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style>...

Gibt es außer der Leistung einen Grund für die Verwendung von WebGL anstelle von 2D-Canvas für 2D- Spiele / Apps? Mit anderen Worten, welche 2D-Funktionen bietet WebGL, die mit 2D-Canvas nicht einfach zu erreichen

Ich versuche, zwei Leinwand zusammen zu stapeln und daraus eine Leinwand mit zwei Ebenen zu machen. Ich habe hier ein Beispiel gesehen: <div style="position: relative;"> <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>...

Geschlossen . Diese Frage muss fokussierter sein . Derzeit werden keine Antworten akzeptiert. Möchten Sie diese Frage verbessern? Aktualisieren Sie die Frage so, dass sie sich nur auf ein Problem konzentriert, indem Sie diesen Beitrag bearbeiten . Geschlossen...

Ich versuche, die Größe einiger Bilder mit Leinwand zu ändern, aber ich weiß nicht, wie ich sie glätten soll. In Photoshop, Browsern usw. werden einige Algorithmen verwendet (z. B. bikubisch, bilinear), aber ich weiß nicht, ob diese in Canvas integriert sind oder nicht. Hier ist meine Geige:...

Ich bin insgesamt n00b mit HTML5und arbeite mit dem canvas, um Formen, Farben und Text zu rendern. In meiner App habe ich einen Ansichtsadapter , der eine Zeichenfläche dynamisch erstellt und mit Inhalten füllt. Dies funktioniert sehr gut, außer dass mein Text sehr unscharf / verschwommen / gedehnt...

Bitte schauen Sie sich das folgende Beispiel an: http://jsfiddle.net/MLGr4/47/ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); img = new Image(); img.onload = function(){ canvas.width = 400; canvas.height = 150; ctx.drawImage(img, 0, 0, img.width, img.height, 0,...

Gibt es eine Möglichkeit, den Inhalt eines HTML-Canvas als Binärdaten zu lesen? Im Moment habe ich den folgenden HTML-Code, um eine Eingabedatei und die Leinwand darunter anzuzeigen: <p><button id="myButton" type="button">Get Image Content</button></p>