Tag: html5-canvas
Canvas ist ein HTML-element, das ermöglicht die dynamische, skriptfähige rendering von 2D-Formen, 3D Formen, bitmap-Bilder und-Animationen in 2D und 3D.
Wie bekomme ich die Maus-Koordinaten auf Fabric.js?
5 Antworten
Ich versuche zu Lesen, die X-Koordinate der Maus klicken Sie auf Fabric.js. Hier ist mein code. Die Konsole meldet undefined jeder Zeit. var canvas = new fabric.Canvas('c1'); canvas.on('mouse:down', function(e){ getMouse(e); }); function getMouse(e) { console.log(e.clientX); } InformationsquelleAutor
Spin wheel Bild in HTML5 (z.B. roulette-Rad)?
3 Antworten
Was ist der beste Weg, um zu emulieren einer spinnenden roulette-Rad in HTML5? Das Rad zu drehen, sollte beherrschbar sein durch eine Eingabe (d.h., die Geschwindigkeit der Rotation basierend auf Benutzereingaben). Das Rad, sollten die Etiketten verwischen,
toDataURL werfen nicht abgefangene Ausnahme Sicherheit
2 Antworten
Habe ich zwei Code-für das testen von html5-canvas Set 1 - Arbeiten perfekt <img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG"> <canvas id="myCanvas"/> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("preview"); ctx.drawImage(img, 10, 10); alert(c.toDataURL()); Set 2 -
Draw Grid / Tabelle auf Leinwand HTML5
2 Antworten
Ich habe gesucht, überall und konnte Sie nicht finden, wie zu draw ein Raster /Tabelle auf einem HTML5-Canvas. Ich bin neu in HTML5 und canvas. Weiß ich, wie man Formen zu zeichnen, sondern das zeichnen-raster haben Ewigkeiten
Editor zum Zeichnen von canvas
3 Antworten
Stehe ich vor einem problem für das zeichnen ein vielschichtiges Bild über das canvas-tag und per JavaScript. Brauche ich ein Werkzeug, oder sagen wir-editor, mit denen kann ich zeichnen Sie ein beliebiges Bild. Es gibt Javascript-code mit
Fehler beim ausführen der 'drawImage' an 'CanvasRenderingContext2D'
1 Antworten
Erhalte ich die folgende Fehlermeldung: Uncaught TypeError: Failed to execute 'Methode drawImage' an 'CanvasRenderingContext2D': Der bereitgestellte Wert ist nicht vom Typ '(HTMLImageElement oder HTMLVideoElement oder HTMLCanvasElement oder ImageBitmap)' Sah ich in Bezug auf die gleichen Fehler hier,
Auf die Drehung eines Bildes im canvas-Bereich mithilfe der Maus
1 Antworten
In meinem code bin ich laden Sie ein Bild in einem canvas. Dann brauche ich zum ändern der Größe, drehen und ziehen Sie es. Ich konnte umsetzen, ziehen und vergrößern. Wie kann ich werkzeugbewegung(entlang der Mitte des
Wie kann ich das ändern der Farbe eines html5-canvas-element mit jquery?
3 Antworten
Grundsätzlich habe ich verschiedene canvas-Zeichnungen auf meiner Seite, was ich will, geschehen wird, wenn eine der jquery-Funktion aktiviert ist, kann die Leinwand Zeichnungen ändern, um die Farbe meiner Wahl. Ich nehme an, es handelt sich um Zugriff
Resize Rechteck HTML5-Canvas
2 Antworten
Habe ich einige Funktionen zum zeichnen von Rechtecken auf ein canvas-element. Wenn das element gezeichnet wird, möchte ich in der Lage sein, um Ihre Größe durch ziehen an den Ecken. HTML <canvas id="canvas" width="500" height="500"></canvas> JS var
Wie undraw, ausblenden, entfernen oder löschen Sie ein Bild aus einer html-canvas?
3 Antworten
this.context.drawImage(myimage, 0, 0); Setzen Sie das Bild auf der Leinwand ist ziemlich gut abgedeckt, alle über das Internet. Aber wie kann ich es entfernen, nachdem es da ist? HTML5-canvas ist treffend benannt, wie es verhält sich fast
Wie man ein div-overlay über eine Leinwand CSS
1 Antworten
Ich versuche, platzieren Sie ein div über ein canvas in HTML5 (wie ein HUD von Arten). Ich bin mit z-index, es funktioniert nicht. Wie kann ich erreichen, das mit jedem CSS? .HUD { z-index:100; } canvas {
Wie erstelle ich den content DIV auf html5-canvas-Einsatz von jquery
2 Antworten
Angenommen ich habe div und innerhalb dieses div habe ich einige Formular-Steuerelemente wie Textfelder,dropdow checkbox,radiobutton, etc. Jetzt möchte ich, dass wenn ein Benutzer auf eine bestimmte Schaltfläche klicken, wird der Inhalt des div wird die Darstellung auf
Wie Kreise, die in HTML5 canvas mit text in Ihnen
1 Antworten
Schien einfach genug, um zu zeichnen Kreise und text, die in einem HTML5-canvas, aber die bekomme ich nicht-intuitives Verhalten. Erhalten die Kreise gezeichnet nett und hübsch, dann die Kreise, die ich ziehe, die älteren Kreise sich mehr
Wie kann ich machen das HTML5-canvas-gehen Sie in den Vollbildmodus?
1 Antworten
Habe ich gesehen, Dutzende von tutorials zu diesem, und es scheint gerade nach vorne. Alles was ich will ist meine HTML5-canvas-element in den Vollbildmodus wechseln (wie in Gesamt-voll-Bildschirm, nehmen den ganzen Bildschirm). Hier ist mein HTML: <p><canvas
Wie die das machen Chart.js animiert, wenn Sie einen Bildlauf zu diesem Abschnitt?
4 Antworten
Ich versuche, mit dem Kreisdiagramm aus Chart.js (http://www.chartjs.org/docs/#pieChart-exampleUsage). Alles läuft glatt, aber die animation geschieht, sobald die Seite geladen, aber da hat der Benutzer nach unten scrollen, um zu sehen, das Diagramm, Sie sehen nicht die animation.
addEventListener keydown funktioniert nicht
3 Antworten
Nahm ich einige grundlegende Pong-Codes auf das internet und versucht, um Tastatureingaben, der code ist hier: http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds Fügte ich hinzu: canvas.addEventListener("keydown", handlekeydown, true); Nach dieser bestehende code: canvas.addEventListener("mousemove", trackPosition, true); canvas.addEventListener("mousedown", btnClick, true); Und ich habe auch
Glätten gezackte Linien gezeichnet vom Benutzer in der HTML5-canvas-app?
3 Antworten
Haben wir eine HTML5-Zeichnung app, wo Benutzer kann Linien zeichnen mit einem Bleistift-tool. Im Vergleich zu Flash-basierten Zeichnung apps, die Linien sind leicht gezackten Rändern und erscheinen etwas verschwommen. Dies geschieht, weil Benutzer müssen halten Sie die
Konvertieren HTML5-canvas zum IMG-element
1 Antworten
Ich würde gerne die Größe ändern, Strecken Sie ein HTML5-canvas in irgendwie, dass die Leinwand wirken wie ein IMG-element: Breite-Höhe von pixel -, Prozent... Frage ich mich, ob es einen Weg, um zu konvertieren/exportieren Sie eine HTML5-Leinwand,
Wie zeichnet man einen Stern durch die Verwendung von HTML5 canvas?
5 Antworten
Versuche zu zeichnen-star-Leinwand, aber der code wird nicht ausgeführt. Ich will verstehen: was sind die Schritte zur Messung der Y-und X-Koordinate? Wie Sie diese finden? zeichnen Sie eine beliebige Form? <html> <head> <meta charset = "utf-8"> <title>Drawing
2D-Bildverarbeitung Mit WebGL
3 Antworten
Ich beabsichtige, erstellen einer einfachen Foto-editor in JS. Meine wichtigste Frage ist, ist es möglich, Filter erstellen, Rendern in Echtzeit? Zum Beispiel, die Anpassung von Helligkeit und Sättigung. Alles was ich brauche ist ein 2D-Bild, wo ich
HTML5 Entfernen der vorherigen gezeichnete Objekt im canvas-Bereich
2 Antworten
Habe ich ein polygon-Objekt (sagen wir ein Auto) gezeichnet, innerhalb einer HTML5-canvas-mit Hilfe von Methoden moveTo und lineTo. Ich will immer wieder ziehen das Objekt an verschiedenen Positionen im canvas-Bereich (simulieren ein sich bewegendes Objekt). Mein problem
Setzen three.js animation innerhalb von div
2 Antworten
Dies ist three.js animation code Beispiel: <script defer="defer"> var angularSpeed = 0.2; var lastTime = 0; function animate(){ var time = (new Date()).getTime(); var timeDiff = time - lastTime; var angleChange = angularSpeed * timeDiff * 2
Schreiben Sie text auf Leinwand mit hintergrund
2 Antworten
Ist es möglich zu schreiben Bild auf Leinwand und schreiben von text mit hintergrund? Zum Beispiel so: Könnten Sie mehr info über das, was Sie versucht haben? Ist es das, was Sie zu tun versuchen? jsfiddle.net/m1erickson/QDDcU InformationsquelleAutor
HTML5-canvas-Größe ändern-Eltern
4 Antworten
Möchte ich die Größe des canvas-Elements so, dass wenn passt seine Eltern, ob es <body> ("full-screen"), oder einige <div> zum Beispiel. Dies ist mein Versuch: //called at each frame function update() { var canvasNode = document.getElementById('mycanvas'); canvasNode.width
Wie man Punkte, im html5-canvas?
2 Antworten
Spiele ich mit einem einfaches tutorial für das zeichnen von Linien in HTML5 Leinwand. Da, es basiert auf jQuery, ist es einfach hinzufügen, jede Menge Effekte in die Zeichnung. Wie kann ich den Punkt anklickbar/hoverable zu fügen
Ausblenden/deaktivieren von QuickInfos chart.js
4 Antworten
Ich versuche zu verstecken die tooltips in ein Liniendiagramm mit chart.js. Ich versuchte diesen code, aber Sie nie verstecken. Chart.defaults.global.tooltipenabled = false; Können Sie sehen, alle code, hier der chart: https://jsfiddle.net/w6zs07xx/ Danke! Es gibt nichts in jsfiddle.
Download-Leinwand-Bild im IE mit Javascript
3 Antworten
Code unten konvertieren canvas zu image und den gleichen heruntergeladen, in anderen Browsern als im IE(ich verwende IE9).IE-Code öffnet theDataURL in einem neuen tab.Aber,es ist nicht downloadbar. if(navigator.appName == "Microsoft Internet Explorer") { somehtml1= document.createElement("img"); somehtml1.id="imgid";somehtml1.name="imgname"; somehtml1.src=canvas.toDataURL("image/png");
ziehen und ändern der Größe eines Bildes auf html5-canvas
1 Antworten
Baue ich ein HTML5-canvas-Bild-editor. Nach dem hochladen ein Bild in den canvas-Bereich, die ich brauche, um Dragg und ändern Sie die Größe über die Leinwand. Ich konnte ein Bild hochladen und machen es ziehbar auf der Leinwand.
So sparen Sie HTML5 canvas?
4 Antworten
Derzeit bin ich mit Canvas2Image zu speichern der Inhalt des HTML5-canvas. Es scheint nicht zu funktionieren mit Google Chrome, jedoch. Irgendwelche Ideen auf, wie das Problem zu umgehen, sind willkommen. 🙂 InformationsquelleAutor Juho Vepsäläinen | 2010-03-30
Das zeichnen von text mit einer äußeren Kontur mit HTML5-canvas
3 Antworten
Ich bin derzeit mit HTML5-canvas zu Rendern eine Reihe von strings mit der Methode fillText. Dies funktioniert gut, aber ich möchte auch geben Sie jedem string einen 1px schwarzen äußeren Kontur. Leider ist die strokeText Funktion scheint
Höhere DPI-Grafiken mit HTML5-canvas
3 Antworten
Gibt es eine Möglichkeit, um eine benutzerdefinierte DPI/PPI beim erstellen eines Abbilds mit dem HTML5 canvas-Element? Ich weiß, wie kann ich das zeichnen auf den canvas-Bereich, und exportieren Sie es als Bild, aber wie kann ich sicherstellen,
Versucht zu retten, Leinwand PNG data-url auf der Festplatte mit HTML5-Dateisystem, aber wenn ich Sie abrufen unter URL ungültig ist
1 Antworten
Bekomme ich die base64-codierte Bild bilden die Leinwand, wie: var dataURL = canvas.toDataURL( "image/png" ); Dann schalte ich es in Daten wie diese: //Remove the beginning identifier and use Chrome/Firefox?safari built int base64Decoder var data = atob(
Rotierenden Objekt zu Gesicht Mauszeiger auf das mousemove -
2 Antworten
Habe ich ein mousemove cursor in meinem Spiel, das wird mein Objekt Schießen zu meinem Maus-cursor. Ich möchte mein Objekt immer drehen zusammen, um im Einklang mit meinem mousecursor. Wie kann ich umwandeln der X-und Y von
Render .pdf auf eine einzige Leinwand mit pdf.js und Bilddaten
4 Antworten
Ich versuche zu Lesen ein ganzes .pdf-Dokument mit PDF.js und dann machen Sie alle Seiten auf einer einzigen Leinwand. Meine Idee: Rendern jeder Seite auf eine Leinwand und Holen Sie sich die Bilddaten (Kontext.getImageData()), deaktivieren Sie die
Wie bekomme ich eine Momentaufnahme noch ein video in nodejs?
3 Antworten
Ich bin versucht, zu schreiben einen nodejs-server, der eine Zeit-Eingang (möglicherweise Teil der url-Pfad) und stellen Sie dann eine immer noch von der video-frame-damals-index als jpeg-Bild. Kann ich dies leicht tun in plain Javascript, aber ich kann
canvas.toDataURL Ergebnisse in einem festen schwarzen Bild?
1 Antworten
Ich habe ein canvas-element mit etwas kritzelei. Ich bin mit dem folgenden zu konvertieren die Leinwand eine jpeg: var data = canvas.toDataURL( "image/jpeg", 0.5 ); var img = new Image(); img.src = data; $( "body" ).append( img
html5 canvas-Spiel - wie Sie mit retina-Unterstützung
3 Antworten
Ich bin momentan dabei, ein HTML5 canvas-Spiel für das iPhone. Ich möchte für die Unterstützung der retina und nicht-retina-displays. Meine Frage ist, wie kann ich Unterstützung sowohl retina und nicht-retina-displays? I. E., was ist die Allgemeine Umsetzung,
Wie würde ich die überlagerung einer Leinwand über den text?
2 Antworten
Hey everyone! Also das Bild oben ist, was ich versuche zu erreichen, mit meinem code, aber der Eine oder andere ist immer drängen die anderen entweder unten oder oben, statt nur sitzen übereinander. Die ich gelesen habe
Messen Sie die Texthöhe auf einem html5-canvas-element
2 Antworten
Ich weiß, ich kann Zusammenhang verwenden.measureText, um die Breite von text, ob es jetzt die Darstellung auf der Leinwand. Gibt es eine Möglichkeit, das gleiche zu tun, aber der text ist Höhe? nur einen Gedanken an mich
HTML5-Canvas - How Zeichnen Sie eine Linie über ein Bild im hintergrund?
4 Antworten
Ich versuche, eine Linie zu ziehen, die auf einem Bild im hintergrund - in einem HTML5-Canvas . Jedoch immer die Linie gezogen wird, die hinter dem Bild . Eigentlich ist die Leine wird zuerst gezeichnet, und dann
HTML5 canvas PDF
1 Antworten
Ich arbeite in HTML5 mit canvas als tool entwerfen. Allerdings möchte ich meine Leinwand in eine jpeg-Datei mit einer default image/png, und ich möchte zeigen, für die Vorschau von meiner Leinwand in einem PDF. Mögliche Duplikate von
HTML5-Canvas: Berechnung der x,y-Punkt, wenn gedreht wird
3 Antworten
Ich die Entwicklung einer HTML5-Canvas-App, und es beinhaltet das Lesen einer xml-Datei, beschreibt die position der Pfeile, rectanges und andere Formen, die ich brauche, um zu zeichnen auf der Leinwand. Beispiel für die XML-layout: <arrow left="10" top="20"
Fabric.js - Free draw ein Rechteck
4 Antworten
Habe ich die folgende, die nicht korrekt funktionieren: var canvas = new fabric.Canvas('canvas'); canvas.observe('mouse:down', function(e) { mousedown(e); }); canvas.observe('mouse:move', function(e) { mousemove(e); }); canvas.observe('mouse:up', function(e) { mouseup(e); }); var started = false; var x = 0; var
Einfaches laden von Animationen in HTML5-canvas
6 Antworten
Ich bin auf der Suche für ein einfaches Bild laden von Animationen. Ich möchte finden, dass eine kurze und einfache Lösung eignet sich auch, verwendet nur die Zeichnung auf die Leinwand und plain Javascript. Pleas help Warum
Wie zeichnet man eine Linie auf einer Leinwand mit fabric.js
1 Antworten
Ich bin mit fabric.js zeichnen Sie eine Linie auf der Leinwand. Das ist mein code, aber ich bekomme keine Ausgabe: $("#Line").click(function() { //alert("Line"); canvas.add(new fabric.Line([50, 100, 200, 200], { left: 170, top: 150, fill: 'red' })); });
Overlay HTML5 canvas-Element über das Bild
2 Antworten
Ich will ein Bild, das hochgeladen wird aus meiner Datenbank und auf der Oberseite von der exakt gleichen Größe in der gleichen position ist ein HTML5-canvas. Meisten Lösungen, die ich gefunden habe, habe ich mit JQuery/JavaScript, aber
Ändern der Farbe für fillText() auf HTML5 <canvas>
2 Antworten
Ich versuche, ändern Sie die Farbe für jede Zeile der meine Nachrichten auf Leinwand, aber bisher ohne Erfolg. Ich habe versucht, die Erstellung von Variablen für jeden von Ihnen, aber noch kein Glück. jede Hilfe würde geschätzt
Holen Sie sich das canvas-Objekt, während mit fabric js
1 Antworten
Ich bin mit Fabric.js und ich habe eine Stoff-canvas-Objekt an einem Ort. var x = new fabric.Canvas("mycanvas"); Nun an einem anderen Ort, die ich für den Zugriff auf das Objekt 'x' nicht verfügbar. Also, wie bekomme ich
Wie zeichnet man eine 3D-Kugel?
4 Antworten
Will ich zeichnen Sie ein 3D-ball oder Kugel in HTML 5.0 Leinwand. Ich möchte verstehen, der Algorithmus dazu, wie zeichnen Sie eine 3D-Sphäre. Wer kann teilen Sie diese mit mir? InformationsquelleAutor der Frage user165273 | 2009-10-18
HTML5-canvas - Objekt drehen, ohne sich zu bewegen Koordinaten
1 Antworten
Was ich habe ist dieses: Was ich will, ist, drehen Sie die rot Rechteck z.B. 20 Grad, aber das ist, was ich am Ende mit: Wie Sie sehen können, wird das Rechteck gedreht ist perfekt, aber es