Tag: canvas

Canvas ist ein generisches element für frei-form-Grafik-Ausgabe.

Erstellen eines Canvas-Elements und Festlegen der Attribute width und height mithilfe von jQuery

Anzahl der Antworten 6 Antworten
War ich nur versuchen, die folgenden in jQuery: var newCanvas = $('<canvas/>',{'width':100,'height':200,'class':'radHuh'}); $(body).append(newCanvas); Diese (Art von) und generiert das folgende markup: <canvas style="width:100px; height:200px;" class="radHuh"></canvas> Als die meisten von Euch vielleicht wissen canvas - Elemente nicht wirklich,

Wie kann ich benutzerdefinierte Schriftarten in einem HTML5-Canvas-Element verwenden?

Anzahl der Antworten 2 Antworten
Ist, habe ich mich auf Dinge wie Cufon und typeface.js aber Sie scheinen es zu SIFR alternativen und nicht erlauben Ihnen das einstellen von Freiform-Koordinaten und zeichnen Sie die benutzerdefinierten Typ auf eine <canvas> Jemand irgendwelche Ideen?

Kann ich ein Bild vom canvas-Element erhalten und es im img src tag verwenden?

Anzahl der Antworten 5 Antworten
Gibt es die Möglichkeit zu konvertieren, das Bild der Gegenwart in einem canvas-element in einem Bild vertreten durch img src? Brauche ich, um ein Bild zu beschneiden, nachdem einige transformation und speichern Sie es. Es sind ein

Größe des Bildes mit Javascript-Canvas (glatt)

Anzahl der Antworten 5 Antworten
Ich versuche, die Größe ändern, einige Bilder mit Leinwand, aber ich bin ratlos, wie zu glätten. Photoshop, Browser, etc.. es gibt einige algorithmen, die Sie verwenden (z.B. Bikubisch, bilinear), aber ich weiß nicht, ob diese gebaut werden,

JavaScript konnte 'drawImage' nicht ausführen

Anzahl der Antworten 2 Antworten
Ok also ich erstelle ein Spiel mit JavaScript-Canvas-Elemente und so. Ich habe in der Lage, die Last in TONNEN von Bildern, sondern auf einige wenige, JavaScript Antworten mit Fehlern wie Uncaught TypeError: Failed to execute 'Methode drawImage"

WPF: Canvas-Ereignisse Funktioniert nicht

Anzahl der Antworten 2 Antworten
Habe ich die Maus-Ereignisse auf einer Leinwand wie folgt MouseUp="CanvasUp" MouseDown="CanvasDown" MouseMove="CanvasMove" Diese sind aber nur aktiv auf die Kind-Elemente, wie Bilder und Rechtecke, aber nicht auf den leeren Raum. Bitte sagen Sie mir, wie zu lösen

Wie fügt man dem Chart-Plugin "Chart.js" Beschriftungen hinzu?

Anzahl der Antworten 4 Antworten
Bin ich mit dem awesome plugin Chart.jsund ich bin versucht, einen Weg zu finden, mit der Anzeige von Etiketten in jeder Prozentsatz. Also habe ich es gegoogelt, und gefunden habe ich dieses ziehen: https://github.com/nnnick/Chart.js/pull/35 Ich habe einen

Erfassen Sie die Signatur mit HTML5 und iPad

Anzahl der Antworten 6 Antworten
Jemand wissen, wie dies getan werden kann? Würden Sie ein canvas-Objekt, svg, jQuery, etc? InformationsquelleAutor der Frage Mark Richman | 2010-06-22

HTML5 Canvas-Kamera / Viewport - wie geht das?

Anzahl der Antworten 4 Antworten
Ich bin sicher, dies war solven 1000 mal vor: ich habe eine Leinwand in der Größe von 960*560 und ein Zimmer in der Größe von 5000*3000, von denen immer nur 960*560 gezeichnet werden soll, je nachdem, wo

Wie zeichne ich einen unscharfen Kreis auf HTML5 Canvas?

Anzahl der Antworten 4 Antworten
Ich bin in der Lage, ziehen Sie einen einfachen Kreis auf HTML5-canvas, aber ich möchte noch hinzufügen, Unschärfe drumherum. Was ich fand, war diese websitedie erklärt, die shadowBlur Eigenschaft, die in handliches kommen kann hier. Kann ich

HTML5 Canvas 100% Breite Höhe des Viewports?

Anzahl der Antworten 6 Antworten
Ich versuche zu erstellen ein canvas-element, das nimmt 100% der Breite und Höhe des Viewports. Können Sie sehen, in meinem Beispiel hierdas Auftritt, aber es ist das hinzufügen von Bildlaufleisten in Chrome und FireFox. Wie kann ich

Erstellen Sie Bitmap aus ByteArray in Android

Anzahl der Antworten 1 Antworten
Ich möchte erstellen Sie eine bitmap aus einem bytearray . Ich habe versucht, die folgenden codes Bitmap bmp; bmp = BitmapFactory.decodeByteArray(data, 0, data.length); und ByteArrayInputStream bytes = new ByteArrayInputStream(data); BitmapDrawable bmd = new BitmapDrawable(bytes); bmp = bmd.getBitmap();

AngularJS Bindung an WebGL / Canvas

Anzahl der Antworten 2 Antworten
Ich bin sehr grün zu AngularJS. Ich Frage mich, ob es möglich ist, verwenden Sie es, wenn Sie Ihre Ansicht mit HTML5-Canvas oder WebGL? Wenn ja, gibt es irgendwelche guten tutorials, wie Sie dies angehen? Habe ich

Subpixel-Anti-Aliasing-Text im HTML5-Canvas-Element

Anzahl der Antworten 5 Antworten
Ich bin ein wenig verwirrt mit der Art, wie das canvas-element anti-alias-text und bin der Hoffnung, Sie alle können helfen. In der folgenden Abbildung ist die Spitze "Quick Brown Fox" ist ein H1-element und das untere ist

HTML Leinwand Vollbild

Anzahl der Antworten 12 Antworten
Spiele ich mit der folgenden Anwendung mit dem HTML-Canvas: http://driz.co.uk/particles/ Im moment eingestellt ist 640x480 Pixel, aber ich möchte es Vollbild gezeigt werden wird ein Projektor. Aber so weit ich erzählen kann ich kann nicht den canvas-Größe

Arbeiten mit Canvas und AngularJS

Anzahl der Antworten 2 Antworten
Ich nehme eine Aufgabe zu re-schreiben Sie die folgenden flash-app in HTML5: http://www.docircuits.com/circuit-editor Angesichts der Komplexität der app und mein R&D so weit, ich haben festgestellt, AngularJS als bevorzugte MVC-framework für die Umsetzung. Die app hat verschiedene

2D-Engines für Javascript

Anzahl der Antworten 5 Antworten
Ich versuche zu bauen, ein Kachel-basierte Spiel, in javascript mit HTML5 canvas. Es gibt -viele - Motoren zur Auswahl, wie zum Beispiel; JawsJS GameJS Cocos2D MelonJS CraftyJS ImpactJS (commercial) ... und die Liste geht weiter und weiter.

Warum Canvas funktioniert nicht mit jQuery Selector?

Anzahl der Antworten 4 Antworten
Habe ich einfaches Beispiel für die Verwendung von Leinwand, und dann sah ich, dass mein code nicht funktioniert, wenn ich die jQuery-Selektor. Beispiele: Javascript window.onload = function() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillRect(10,50,100,200);

Zoom auf einen Punkt (mit Skala und übersetzen)

Anzahl der Antworten 10 Antworten
Ich möchte in der Lage sein, um zoom-in auf den Punkt unter der Maus in eine HTML-5-canvas, wie das Zoomen auf Google Maps. Wie kann ich das erreichen? InformationsquelleAutor der Frage csiz | 2010-05-26

Wie erhalte ich die Breite und Höhe eines HTML5-Canvas?

Anzahl der Antworten 5 Antworten
Wie kann ich die Breite und Höhe des canvas-Elements in JavaScript? Auch, was ist der "Kontext" von der Leinwand immer wieder lese ich über? InformationsquelleAutor der Frage clamp | 2010-10-27

Was ist der Unterschied zwischen SVG und HTML5 Canvas?

Anzahl der Antworten 8 Antworten
Was sind die Unterschiede zwischen SVG und HTML5 Canvas? Sie scheinen beide das gleiche zu tun für mich. Sie sind im Prinzip beide zeichnen von Vektorgrafiken mit Koordinaten-Punkte. Was bin ich? Was sind die wichtigsten Unterschiede zwischen

Leinwand Bild Glättung

Anzahl der Antworten 6 Antworten
Was ist ctx.mozImageSmoothingEnabled = false; für webkit(oder anderen Browsern)? Ich brauche es zu entfernen, anti-aliasing, weil ich versuche zu bekommen eine pixelized Effekt auf ein Bild. Mit anti-aliasing, sieht es schlecht aus-Qualität, aber ohne scharfe Kanten. InformationsquelleAutor

Zerstören Sie das Diagramm charts.js, um andere Graphen in demselben & lt; canvas & gt;

Anzahl der Antworten 3 Antworten
Ich bin mit dem Chart.js Bibliothek zu ziehen bar graphes ist in Ordnung arbeiten, jetzt will ich aber, um das zu zerstören bar graph und eine line graph in der gleichen Leinwand. Ich habe versucht, diese zwei

Deaktivieren Sie die Pfeiltaste im Benutzerbrowser

Anzahl der Antworten 2 Antworten
Mache ich ein Spiel mit canvas und javascript. Wenn die Seite länger ist als der Bildschirm (Kommentare, etc.) drücken Sie den Pfeil nach unten scrollt die Seite nach unten, und macht das Spiel unmöglich zu spielen. Was

Render Highcharts Canvas als PNG auf der Seite

Anzahl der Antworten 4 Antworten
Ich verwende die HighCharts-Bibliothek zum generieren von dynamischen charts. Allerdings würd ich gern zum Rendern der HighCharts-canvas-element als ein PNG-Bild, so dass der Benutzer kann kopieren und fügen Sie den chart in eine E-Mail, etc. ohne die

Löschen von kreisförmigen Regionen aus HTML5 Canvas

Anzahl der Antworten 5 Antworten
Scheint es der einzige Weg zum löschen einer region aus einer Leinwand ist die Verwendung des clearRect () - Befehl ich brauche um klar einen Kreis (ich bin Maskierung aus Bereichen aus einem gefüllten Leinwand, zeigen Lichter

Web-basierte großformatige Graphzeichnungsbibliothek

Anzahl der Antworten 5 Antworten
Ist es gute javascript-Bibliothek für das zeichnen von Grafiken in einer Webseite? Ich will eine moderne HTML5-Bibliothek, die vorzugsweise verwendet, Leinwand und/oder webgl. Ich haben gefunden ein paar von gut web Bibliotheken während die Erforschung aber nicht

Wie bekomme ich die Koordinaten eines Mausklicks auf ein Canvas-Element?

Anzahl der Antworten 19 Antworten
Was ist der einfachste Weg, um einen click-Ereignis-handler, um ein canvas-element, die Rückkehr der x-und y-Koordinaten des Mausklicks (relativ zum canvas-element)? Kein legacy-browser-Kompatibilität erforderlich, Safari, Opera und Firefox tun. InformationsquelleAutor der Frage Tom | 2008-09-11

Maskierung / Überlappung von Leinwandbildern

Anzahl der Antworten 2 Antworten
In meinem Projekt habe ich für die Implementierung einer anderen Farbe Bild auf der anderen gleiche Größe und das Muster-Bild mit Leinwand und Bilder sind nicht in Runde oder rechteckige Formen. Alle sind in Wellen-Form und es

Warum verwenden alle Leinwandbeispiele CTX?

Anzahl der Antworten 5 Antworten
Ist dies eine Voraussetzung oder eine Tagung? Wenn es eine Konvention, was ist der Grund? Ctx scheint nicht besonders einprägsam oder intuitiv. z.B. var ctx = document.getElementById('canvas').getContext('2d'); InformationsquelleAutor der Frage j08691 | 2011-02-14

mit HTML5 Canvas - Bild um einen beliebigen Punkt drehen

Anzahl der Antworten 1 Antworten
Drehen Sie das Wählrad auf der Oberseite eine halbrunde(nördliche Hemisphäre) Bild als hintergrund. Bereich von 0 - 180 Grad. am Eingang zu der Methode, die Leinwand transformation, das Einstellrad drehen und aufhören, über die abgestimmt Wert. Hier

getContext ist keine Funktion

Anzahl der Antworten 3 Antworten
Ich bin dabei, eine grundlegende web-Anwendung mit Leinwand, die dynamisch ändert sich die canvas Größe, wenn die Größe des Fensters geändert wird. Ich habe es zu arbeiten statisch, ohne jegliche Mängel, aber wenn ich ein Objekt erzeugen,

HTML5 Canvas und Linienbreite

Anzahl der Antworten 4 Antworten
Ich bin zeichnen von Kurven auf einer Leinwand. Die Linien zeichnen feine. Die Grafik wird so skaliert, jedes segment ist gezeichnet, die Farbe sind ok, etc. Mein problem ist nur optisch die Linienbreite variiert. Es ist fast

Deaktivieren Sie Vollbild-iPhone-Video

Anzahl der Antworten 3 Antworten
Kämpfen mit diesem problem für ein paar Tage in Folge... Gibt es eine Möglichkeit oder 'hack' zu deaktivieren, die Wiedergabe von video-Vollbild auf Safari auf einem iPhone. Natürlich habe ich schon versucht, die 'webkit-playsinline' - Attribut, dies

HTML5 Canvas drawImage-Verhältnis Fehler iOS

Anzahl der Antworten 5 Antworten
Möchte ich die Größe des Bildes stammt aus der iOS-Kamera auf der client-Seite mit HTML5-Canvas, aber ich laufen in dieser seltsamen bug wo das Bild hat ein Falsches Verhältnis, wenn größer als ~1,5 mb Es funktioniert auf

HTML5-Canvas-Transformationsmatrix

Anzahl der Antworten 4 Antworten
Ich verstehe nicht, was die Matrix ist und wie mit ihm zu arbeiten. Den folgenden zeichne einen Kreis in 0, 0 meiner Leinwand: (generiert aus einer svg konvertiert werden svg2canvas.jar) drawPoints: function(ctx, max_points) { ctx.save(); ctx.setTransform(1, 0,

Simulation Hintergrundgröße: Cover in Canvas

Anzahl der Antworten 2 Antworten
Ich zeichne Bilder auf die Leinwand wie diese: ctx.drawImage(data[i].image, data[i].pos.x, data[i].pos.y, data[i].pos.w, data[i].pos.h); die Sache ist die, dass das Bild immer gestreckt und das will ich nicht. Wie kann ich simulieren die css-Eigenschaft background-size: cover während-Zeichnung Bild

Base64 PNG-Daten in HTML5-Canvas

Anzahl der Antworten 1 Antworten
Möchte ich laden Sie ein PNG-Bild in Base64 codiert, um das canvas-element. Ich habe diesen code: <html> <head> </head> <body> <canvas id="c"></canvas> <script type="text/javascript"> var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC"; ctx.drawImage(data, 0,

Canvas vs. WebGL vs. CSS 3d - & gt; Welches zu wählen?

Anzahl der Antworten 4 Antworten
Für grundlegende 3d-web-Anwendung, dh ein paar Würfel, rotation und translation im 3d-Raum - die ist besser zu wählen? CSS-3d-scheint die einfachste, aber wird nicht unterstützt, auf IE9 oder auf der roadmap für IE10 und bietet weniger Kontrolle

setTimeout oder setInterval oder requestAnimationFrame

Anzahl der Antworten 2 Antworten
Für HTML5-Spiele,mit canvas-animation für mobile Geräte. Ich bin vor einige performance-Probleme, die sich die Geschwindigkeit zwischen jedem Gerät und dem anderen. requestAnimationFrame Geschwindigkeit der animation des Spiels nach, um das Gerät die Geschwindigkeit. setInterval schockiert mich, dass

Identifizieren Sie den Typ des ausgewählten Objekts in Fabricjs

Anzahl der Antworten 3 Antworten
Ich bin platzieren von Text , Bild und Formen auf Leinwand mit Fabric.js ich habe Drei Verschiedene Edit-Panels für alle drei . Wenn der Benutzer text auswählen, die ich zeigen will-text-Bedienfeld . wie klug, für Bild-und Formen

Wie kann man wissen, ob PDF.JS das Rendern beendet hat?

Anzahl der Antworten 9 Antworten
Ich bin mit PDF.JS zum Rendern von pdf-Seiten in verschiedene canvas-Elemente. meine Forderung ist zum erfassen der Ausgabe der Leinwand und zeigt es als Bild. Gibt es irgendein Ereignis, um zu wissen, ob die Darstellung der pdf-Seite

Kann ich Antialiasing auf einem HTML & lt; canvas & gt; Element?

Anzahl der Antworten 8 Antworten
Ich bin Herumspielen mit der <canvas> element, Linien zeichnen und so. Habe ich bemerkt, dass meine Diagonale Linien werden geglättet. Ich würde lieber die gezackte Aussehen für das, was ich mache - gibt es einen Weg, der

Das Zeichnen einer 1px dicken Linie im Canvas erzeugt eine 2px dicke Linie

Anzahl der Antworten 7 Antworten
In diesem jsfiddle es eine Linie mit einer Linienbreite von 1. http://jsfiddle.net/mailrox/9bMPD/350/ e.g: ctx.lineWidth = 1; Jedoch die Linie 2px dick, wenn es gezeichnet wird auf der Leinwand, wie erstellen Sie eine 1px Dicke Linie. Könnte ich

Wie lese ich eine Datei in AngularJS?

Anzahl der Antworten 2 Antworten
Ist es möglich, Dateien zu Lesen in AngularJS? Ich will die Datei in ein HTML5 canvas-Bereich zu beschneiden. War ich denken mit einer Richtlinie? Dies ist die javscript-code möchte ich in meiner Richtlinie: function readURL(input) { if

Interaktive Textfelder mit Fabric.js

Anzahl der Antworten 6 Antworten
Spiele ich schon mit Fabric.js eine Menge in den letzten paar Wochen, aber in Bezug auf text-Felder habe ich nur gefunden es möglich, den text bei der Erstellung. Gibt es eine Möglichkeit zu machen eine interaktive text-Feld,

Wie füge ich einem Canvas-Element einen einfachen onClick-Event-Handler hinzu?

Anzahl der Antworten 6 Antworten
Ich bin ein erfahrener Java-Programmierer, aber auf der Suche bin einige JavaScript - /HTML5-Zeug zum ersten mal in über einem Jahrzehnt. Ich bin völlig ratlos, was die einfachste Sache überhaupt. Als ein Beispiel, ich wollte nur etwas

Wie kann ich Text auf ein HTML5-Canvas-Element schreiben?

Anzahl der Antworten 4 Antworten
Ist es möglich, text zu schreiben, auf HTML5 canvas? Kommentar zu dem Problem Ich würde empfehlen, das Lesen durch den <a href="diveintohtml5" >diveintohtml5.info/">diveintohtml5</a>; Website, es hat einen eigenen <a href="Kapitel" >diveintohtml5.info/canvas.html#text">Kapitel über die text</a>. Es ist sehr

Wie ändert man die Größe des HTML-Canvas-Elements?

Anzahl der Antworten 7 Antworten
Ich habe ein canvas-element statisch definiert in der html-mit einer Breite und Höhe. Wenn ich versuche, JavaScript zu verwenden, um Ihre Größe dynamisch (setzen Sie eine neue Breite und Höhe - entweder auf die Attribute der Leinwand

Das Paket cairo wurde im Suchpfad von pkg-config nicht gefunden. Node js. Canvas-Problem installieren

Anzahl der Antworten 6 Antworten
Ich habe ein problem bei der Installation von der Installation der Leinwand-Modul in node..Es scheint etwas mit Kairo bin ich immer diese Fehlermeldung... npm http GET https://registry.npmjs.org/canvas npm http 304 https://registry.npmjs.org/canvas npm http GET https://registry.npmjs.org/nan npm http