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 man den Zusammenhang von X-und Y-position innerhalb des canvas-html5

Anzahl der Antworten 1 Antworten
Habe ich diese fiddle und ich brauche, um zu wissen, die position, von wo aus mein raster beginnt die ganze Zeit; Kann ich zoom-und sogar drag-and-drop das raster. <!DOCTYPE html> <!-- saved from url=(0048)http://phrogz.net/tmp/canvas_zoom_to_cursor.html --> <html lang="en">

Google maps mit JQuery Mobile und jquery-ui-map

Anzahl der Antworten 1 Antworten
Bin ich mit dem jQuery-UI-Map-Bibliothek ( https://code.google.com/p/jquery-ui-map/ ), um eine Karte auf meiner html5 mobile website, allerdings bin ich immer nur ein graues Quadrat, egal was ich versuche. Mein code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

Html-5-canvas getElementById() gibt null/undefined

Anzahl der Antworten 2 Antworten
hier der code: HTML: <body onload="initializeMap()"> <div id="map_canvas" style="width:100%; height:100%; z-index:1"></div> <canvas id="control" style="width:100%; height:100%; z-index:2">Does Not Support Canvas Element</canvas> </body> Javascript: <script type="text/javascript"> var canvas = document.getElementById('control'); var context = canvas.getContext('2d'); function draw(){ context.font = "bold

Zeichnen im verborgenen html5-canvas-element funktioniert nicht

Anzahl der Antworten 3 Antworten
Ich versuche zu zeichnen in einem canvas-während Ihre Muttergesellschaft ist display:none. Gibt es eine Möglichkeit, das zu tun? Hier ein jsFiddle zu demonstrieren, dass mein problem: http://jsfiddle.net/kannix/jSj83/ Wenn Sie klicken Sie einfach, ziehen, funktioniert alles wie erwartet.

Einfachste Diashow in HTML5-canvas, Leinwand.Kontext.clearRect funktioniert nicht mit setTimeout

Anzahl der Antworten 3 Antworten
Hier ist ein code, der eine sehr einfache slideshow, die zeigen sollten 4 Bilder in 4 Sekunden, ein Bild pro Sekunde. Stattdessen bekomme ich eine 4-Sekunden-Verzögerung, und dann alle die Bilder gezogen, die auf der jeweils anderen.

So wählen Sie ein HTML5-canvas-Formen?

Anzahl der Antworten 3 Antworten
Ich habe ein HTML5-canvas, auf dem ich gezeichnet habe, mehrere Formen. Was ich will, geschehen wird, ist, dass, wenn die Maus geklickt wird, die auf jede Form der Form bekommen sollten, ausgewählt (zumindest sagen können, welche Art

Javascript-Canvas-klar/ neu zeichnen

Anzahl der Antworten 1 Antworten
Ich habe versucht zu googlen, die Antwort auf diese, aber ich bin einfach im Kreise herum.... Wenn ich klar den rect (mit clearRect), dann wird das Bild nicht neu gezeichnet nach. Allerdings, wenn ich nicht klar, die

Erstellen gleichseitiges Dreieck in der Mitte der Leinwand?

Anzahl der Antworten 6 Antworten
Ich will zeichnen Sie ein gleichseitiges Dreieck in der Mitte des canvas-Bereichs. Ich versuchte dies: ctx.moveTo(canvas.width/2, canvas.height/2-50); ctx.lineTo(canvas.width/2-50, canvas.height/2+50); ctx.lineTo(canvas.width/2+50, canvas.height/2+50); ctx.fill(); Aber das Dreieck sieht ein bisschen zu groß. Wie kann ich zeichnen Sie ein gleichseitiges

Html5-canvas zu scrollen vertikal und horizontal

Anzahl der Antworten 1 Antworten
<!DOCTYPE html> <html> <head> <style type="text/css"> #canvasOne { border: 1px solid black; } </style> <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script> </head> <body> <div align="center"> <canvas id="canvasOne"> </canvas> </div> <script type="text/javascript"> var myCanvas = document.getElementById("canvasOne"); var myContext = myCanvas.getContext("2d"); var requestAnimationFrame

Zeichnen eines gefüllten Kreises in eine Leinwand, auf Mausklick

Anzahl der Antworten 1 Antworten
Will ich ziehen, einen ausgefüllten (oder nicht ausgefüllt) Kreis in eine Leinwand, auf Mausklick, aber ich kann nicht mein code, um richtig zu arbeiten, ich habe versucht so ziemlich alles! Dies ist mein HTML: <div id="images"></div> <canvas

so verschieben Sie ein Bild auf Leinwand mit Tastatur-Pfeil-Taste in html5

Anzahl der Antworten 2 Antworten
I m Zeichnen das Bild auf die Leinwand mit diesem code und er hat erfolgreich das image zeichnen auf canvas will ich jetzt verschieben Sie das Bild auf Leinwand für die, die ich Schreibe ich den code

Javascript timer-Verzögerung

Anzahl der Antworten 1 Antworten
Habe ich mich entschlossen zu spielen, um mit HTML5 canvas, und, natürlich, das bedeutet, ich werde versuchen, schriftlich eine pong-Spiel. Im moment bin ich versucht, herauszufinden, wie um die Mütze mein framerate. Dies ist Recht einfach in

EaselJS: ändern Sie Form, Füllfarbe auf Mausklick

Anzahl der Antworten 2 Antworten
Ich habe eine harte Zeit mit EaselJS. Grundsätzlich möchte ich die Erstellung eines einfachen Gitters, und markieren Sie das aktuelle element ausgewählt: var stageWidth = 800, stageHeight = 600, cell_size = 50, w = 16, h =

html5-canvas-toDataURL leeres Bild zurück

Anzahl der Antworten 1 Antworten
ich benutze folgenden code zum zeichnen der Leinwand und speichern Sie es als png-Bild mit toDataUrl. <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; } </style> <script>

Mobile App "unable to load previous operation wegen zu wenig Speicher" nach dem laden Bild?

Anzahl der Antworten 2 Antworten
Ich habe eine einfache mobile app. Es beginnt, indem der Benutzer aufgefordert wird, um ein Bild auszuwählen, welches dann lokal geladen wird über den folgenden code und Darstellung auf einer Leinwand: function handleFileSelect(evt) { var files =

Setzen Sie die Summe der Werte in der Mitte des Donut-Diagramm?

Anzahl der Antworten 2 Antworten
Ich zeichne das Kreisdiagramm: mithilfe dieses Codes: dxPieChart: { dataSource: dsAlarmsBySeverity, size: { width: 275, height: 150 }, palette: ['#FFFF00', '#FF9900', '#CC3300', '#33CC33', '#0066FF'], legend: { backgroundColor: '#FCFCFC', border: { color: 'black', width: .5, visible: true, cornerRadius:

Wie positioniert Leinwand mit relativer/absoluter Positionierung

Anzahl der Antworten 2 Antworten
Ich habe Probleme bei der Einstellung der Position der Leinwand in relation zu einem anderen, so schrieb ich die folgenden test-harness. Ich würde erwarten, dass die Position angegeben, die von "oben" amd "Links" im div ' s

D3js - Immer ein Liniendiagramm gezeichnet, von "JSON-Daten" - Eingang über die d3.json

Anzahl der Antworten 2 Antworten
Ich habe vor kurzem angefangen zu studieren D3.js und stieß auf einige Probleme.. Hier ist was ich versucht habe so weit : Hier mein JS : d3.json("../js/sample2.json", function(data) { var canvas = d3.select("body").append("svg") .attr("width", 500) .attr("height", 500)

hinzufügen Leinwand dynamisch mit jquery

Anzahl der Antworten 1 Antworten
Habe ich alle meine code in diese Geige: http://jsfiddle.net/RymyY/ Meine Fragen befassen sich mit der "Add Shape" - Taste auf der linken Seite. Ich möchte in der Lage sein, hinzufügen, um eine neue Leinwand zu jeder Zeit

Bewegen Bild im HTML-canvas-Element mit der Maus

Anzahl der Antworten 1 Antworten
Habe ich ein Bild, das ich brauche, um zu skalieren, verschieben und drehen im inneren eine Leinwand, und als ein weiteres Bild, dass ich Sie als Maske verwenden, um clip-das andere Bild mit globalCompositeOperation = "source-in"; Hier

Drehen + Zoom-Bild

Anzahl der Antworten 3 Antworten
Brauche ich drei grundlegende Funktionen für die Manipulation eines Bildes: Das Bild drehen; Das Bild vergrößern; Verschieben Sie das Bild. Ich bin jetzt versucht, das Bild vergrößern, aber es hat zu halten, das gedrehte Bild, wenn ich

Canvas.toDataURL () " Uncaught TypeError: undefined keine Funktion

Anzahl der Antworten 1 Antworten
Verwende ich ein plugin namens html2canvas zum konvertieren von html auf meiner Seite in ein canvas-element. Ich habe dann speichern möchten, die Leinwand wie ein Bild. Leider halte ich die Begegnung mit dem Fehler im Titel. Ich

Bild verkleinern vor dem hochladen ohne Album Vorhören javascript

Anzahl der Antworten 1 Antworten
Möchte ich vermeiden das hochladen von großen/schweren image-Dateien. Ich lieber HTML5-FileAPI-Bibliothek für diese Aufgabe. Alle anderen Funktionen Hinzugefügt (upload, re-order, etc.), also brauche ich nur die Bild-Größe ändern-Funktion. FALL: Auf der Seite gibt es einen Eingang für

Html-5-Canvas komplette Pfeilspitze

Anzahl der Antworten 4 Antworten
Ich bin mit dem wPaint plugin, und ich bin versucht, fügen Sie ein paar mehr features. Was ich brauche ist eine gezeichnete Linie bis zum Ende mit einer "Pfeilspitze". Ich habe versucht, fast alles, was ich denken

HTML5-Erzeugung von video aus Bildern

Anzahl der Antworten 3 Antworten
Frage ich mich, da HTML und javascript sind hypnotisierend zusammen, wenn es eine Lösung in HTML5 erzeugen eine video-Datei aus vielen Bildern? Beispielsweise, Sie sind in der Lage, laden Sie ein video in ein Bild und machen

Speichern von html5-canvas als Bild in server

Anzahl der Antworten 2 Antworten
Hatte ich ein html5-canvas-Element mit einem Bild. Völker Bearbeiten/anpassen, Bild mit javascript. Nachdem alles fertig, müssen Sie eine option, um die post, die Bild in Ihrem Facebook Wand. Als der nach meinem besten wissen können wir die

Sicherheit Fehler mit Leinwand.toDataURL() und der Methode drawImage()

Anzahl der Antworten 4 Antworten
<!doctype html> <canvas id="canvas" height="200" width="200"></canvas> <div id="new"></div> <script> var div = document.getElementById("new"); var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.src = 'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png'; //img.src = 'local.png'; img.onload = function(){ //draws the

Formel für die Anpassung von Helligkeit/Kontrast auf die Leinwand?

Anzahl der Antworten 2 Antworten
Ebenso gibt es eine Formel für die Umwandlung eines Bildes in Graustufen, gibt es eine Formel für die Erhöhung der Helligkeit eines Bildes und verringert im gleichen level? Ich habe versucht, das hinzufügen eines Wertes zu jedem

Wie integriert sich ein progress-bar in angularjs Richtlinie mit Datei-upload

Anzahl der Antworten 2 Antworten
Brauche ich zum erstellen einer Fortschrittsanzeige bei Datei-uploads. Ich weiß, dass meine Fortschritte Ereignis-listener arbeiten. Ist es mehr "Winkel-Art" zu sein, dies zu tun? Wie kann ich ein update der Fortschrittsbalken aus in meinem Ereignis-listener? Als ein

Wie speichern Sie Bild auf Leinwand in fabric.js

Anzahl der Antworten 1 Antworten
Bin ich erstellen, eine Anwendung für das T-shirt customization, in dem ich die Leinwand auf das Bild mit CSS, aber das problem ist das speichern, Bild als Leinwand. toDataURL gibt nur einen Teil der canvas-Bereich, aber ich

Video-capture in HTML 5

Anzahl der Antworten 2 Antworten
Wie die Aufzeichnung von Videos von einem video-Gerät und stellen Sie das video in HTML5-canvas ? InformationsquelleAutor kairav | 2011-09-12

Größenänderung von Fotos auf einer Leinwand, ohne dabei das Seitenverhältnis

Anzahl der Antworten 2 Antworten
Hallo alle vielen Dank für jede Hilfe im Voraus. Ich Schreibe eine phonegap-app und können nicht bekommen, um das Foto zu verkleinern, ohne dass sich die beiden verlieren den Aspekt oder beschneiden Sie das Bild, indem Sie

P2P Video Confrencing mit HTML5 oder Javascript

Anzahl der Antworten 2 Antworten
Ich versuche zu bauen, die video conferencing mit html5 und javascript bis jetzt bin ich in der Lage, zum streamen von meiner Kamera einzufangen und auf Leinwand hier ist der code <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head>

"Befleckten Leinwände kann nicht geladen werden" Cross-domain-Problem mit WebGL-Texturen

Anzahl der Antworten 2 Antworten
Ich habe viel gelernt in den letzten 48 Stunden über cross-domain-Richtlinien, aber offenbar nicht genug. Folgenden diese Frage. Mein HTML5 Spiel unterstützt Facebook-login. Ich versuche, die download-Profilbilder der Freunde des Volkes. In der HTML5-version von meinem Spiel

Erstellen Sie einen realistischen Bleistift-tool für eine Malerei-app mit HTML5-Canvas

Anzahl der Antworten 0 Antworten
Zunächst möchte ich sagen, dass ich eine Menge Forschung und versucht mich ohne Erfolg. Arbeite ich an einem MSPaint-like-Anwendung mithilfe von Leinwand, und ich würde gern ein Bleistift-tool, das realistisch wirkt wie handgemacht Zeichnungen... Hier ist ein

JavaScript-Links und rechts-Klick-Funktion

Anzahl der Antworten 1 Antworten
Dies ist für ein HTML5 canvas-Spiel, das ich mache. Im Spiel gibt es einen Charakter, der hat ein Gewehr, er kann Schießen Sie und laden Sie es erneut. Ich möchte, dass der Spieler mit der linken Maustaste

Image viewer in html5

Anzahl der Antworten 2 Antworten
Habe ich die Entwicklung einer Bild-viewer-Anwendung. Die entwickelte Anwendung sollte folgende Eigenschaften haben Zoom-in-Funktionalität Zoom-out-Funktionalität Lupe Funktionalität Pan-Funktionalität Bild-übersicht über die Funktionalität Habe ich auf die Anwendung zu entwickeln, die in Asp.net -Anwendung. Ich habe die folgenden

Wie dreht man ein Bild in ein canvas?

Anzahl der Antworten 5 Antworten
Mache ich ein HTML5 canvas-Spiel, und ich möchten, drehen Sie eines der Bilder. var link = new Image(); link.src='img/link.png'; link.onload=function(){ ctx.drawImage(link,x,y,20,20); //draws a chain link or dagger } Ich möchten drehen Sie das Bild. Der standard-Weg von

Nicht in der Lage, um nehmen Sie Foto von der webcam mit HTML5 getUserMedia() in Google Chrome auf der ersten Seite laden

Anzahl der Antworten 1 Antworten
Unter Verweis aus dieser Artikel auf HTML5Rocks ich versuche zu bauen, ein Dienstprogramm, um Foto zu machen mit einer webcam. Unten ist mein HTML-code-snippet: <button type="button" name="btnCapture" id="btnCapture">Start my camera</button><br /> <video autoplay="true" id="video" style="height:240px;width:320px"></video><canvas id="canvas" style="display:

HTML5 Panning basierend auf die Bewegung der Maus

Anzahl der Antworten 2 Antworten
Ich versuche zur Implementierung von Funktionen zum "schwenken" in einem canvas in HTML5 und ich bin nicht sicher über den besten Weg zu gehen, zu vollbringen es. Derzeit - ich bin versucht zu erkennen, wo die Maus

Wie man Font Awesome Icons auf html-canvas

Anzahl der Antworten 1 Antworten
Wie kann ich zeichnen, Schrift-Awesome Zeichen (Symbole, Glyphen) auf html5 canvas? Wie kann ich diesen Stil gezeichneten Charaktere? <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.font = ''; context.fillText(); </script> Sprache: lang-html <canvas id="myCanvas" class="canvas"

Wie extrahieren Sie die Ausrichtung der Bilder von Daten aus einem image geladen Leinwand

Anzahl der Antworten 2 Antworten
Ich bin erstellen einer web-app, die es erlaubt Bild-upload direkt in die Leinwand. Manchmal, wenn Bilder hochgeladen werden von iPad oder anderen Geräten, Sie orientiert sich anders. Ich versuche einen Weg zu finden, zu extrahieren, die von

Bild laden aus lokalen Pfad und ziehen Sie es auf die Leinwand

Anzahl der Antworten 3 Antworten
Ich will zeichnen Sie ein Bild auf Leinwand, wo die Quelle für das Bild wird dynamisch festgelegt werden durch den Benutzer.Ich erhalte folgende Fehlermeldung beim Versuch, den Satz src für das Bild: Nicht erlaubt zu laden, auf

FabricJS: Immer Zentrum Objekt auf Leinwand

Anzahl der Antworten 2 Antworten
ist es möglich, IMMER die Mitte eines Objekts an einem fabricjs Leinwand? Hintergrund: ich Baue eine webtools, die es leicht macht, die das erstellen komplexer Animationen mit fabricjs. Ich möchte in der Lage sein, um die canvas-Größe

HTML5 Methode drawimage aus video-Leinwand

Anzahl der Antworten 1 Antworten
War ich versucht, einen Rahmen aus video und Zeichnung im canvas-Bereich mit HTML5, aber der code unten funktioniert nicht. wenn ich auf die start-Taste, die Leinwand ist gefüllt mit schwarzer Farbe <video src="video2.mp4" autoplay="true" type="video/mp4" width="300" height="200"

Erstellen eines Diagramms in HTML5 mit Charts.js

Anzahl der Antworten 1 Antworten
Ich soll zeichnen Sie eine Linie Diagramm mit Chart.js ich folgte dem "Getting started" - Abschnitt Chart.js aber ich bin noch nicht in der Lage zu zeichnen, auch das Beispiel-Diagramm. Was ist falsch an meinem code? Nach

Bild Klicken-Ereignis in HTML5-Canvas

Anzahl der Antworten 4 Antworten
Ich habe ein HTML5-canvas und ich habe ein Bild in es und ich Sie aufrufen möchten, klicken Sie auf Ereignis-Bild-aber-Ereignis nicht ausgelöst. Ich Schreibe ein html-code und code von jqmobile <html> <head> <script src="jquery-1.10.2.min.js"></script> <script src="jquery.mobile-1.2.1.js"></script> <script

Wie mache ich code von Codepen, und verwenden Sie es lokal?

Anzahl der Antworten 5 Antworten
Wie nehme ich den code von codepen, und verwenden Sie es lokal in meinem text-editor? http://codepen.io/mfields/pen/BhILt Ich versuche, ein Spiel mit dieser Kreation lokal, aber wenn ich es öffnen in chrome, bekomme ich eine leere weiße Seite

getImageData cross-origin-Fehler

Anzahl der Antworten 1 Antworten
Vorläufer: ich weiß, es haben schon ein paar Fragen, die bereits aufgefordert, zu diesem Thema, aber keiner von Ihnen scheinen zu bieten, einen geraden JavaScript-einzige Lösung. Also lief ich in diese Fehlermeldung, wo ich bin versuchen, um

Laden Sie Bild aus url, und ziehen Sie, um HTML5-Canvas

Anzahl der Antworten 1 Antworten
Ich habe Probleme beim laden eines Bildes von einer url in javascript. Der untenstehende code funktioniert, aber ich will nicht zu haben, um das geladene Bild aus html. Ich möchten, laden Sie das Bild aus einer url