Programmazione html5-canvas

23

Dopo aver sperimentato operazioni composite e disegnando immagini sulla tela, ora sto provando a rimuovere immagini e compositing. Come faccio a fare questo? Devo cancellare la tela per ridisegnare altre immagini; questo può andare avanti per un po ', quindi non credo che disegnare un nuovo rettangolo ogni volta sarà …

1013 javascript html canvas html5-canvas composite

8

HTML5 Canvas vs. SVG vs. div

Qual è l'approccio migliore per creare elementi al volo e poterli spostare? Ad esempio, supponiamo che io voglia creare un rettangolo, un cerchio e un poligono, quindi selezionare quegli oggetti e spostarli. Capisco che HTML5 fornisce tre elementi che possono renderlo possibile: svg , canvas e div . Per quello …

476 javascript html svg html5-canvas

14

Ridimensiona la tela HTML5 per adattarla alla finestra

Come posso ridimensionare automaticamente l' <canvas>elemento HTML5 per adattarlo alla pagina? Ad esempio, posso ottenere un <div>ridimensionamento impostando le proprietà heighte widthsu 100%, ma un <canvas>non ridimensionerà, vero?

400 javascript html html5-canvas

7

Come salvare una tela HTML5 come immagine su un server?

Sto lavorando a un progetto di arte generativa in cui vorrei consentire agli utenti di salvare le immagini risultanti da un algoritmo. L'idea generale è: Crea un'immagine su una tela HTML5 usando un algoritmo generativo Al termine dell'immagine, consentire agli utenti di salvare l'area di disegno come file di immagine …

261 javascript php ajax html5-canvas

4

Come posso animare il disegno di testo su una pagina Web?

Voglio avere una pagina web che abbia una parola centrata. Voglio che questa parola sia disegnata con un'animazione, in modo tale che la pagina "scriva" la parola nello stesso modo in cui vorremmo, cioè inizia da un punto e disegna linee e curve nel tempo in modo che il risultato …

229 javascript css canvas html5-canvas css-shapes

15

Come salvare un'immagine PNG sul lato server, da una stringa di dati base64

Sto usando lo strumento JavaScript "Canvas2Image" di Nihilogic per convertire i disegni su tela in immagini PNG. Ciò di cui ho bisogno ora è trasformare quelle stringhe base64 che questo strumento genera, in veri e propri file PNG sul server, usando PHP. In breve, quello che sto facendo attualmente è …

212 php javascript base64 html5-canvas

10

Le tele contaminate non possono essere esportate

Voglio salvare la mia tela su un img. Ho questa funzione: function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } Mi dà errore: Uncaught SecurityError: Impossibile eseguire "toDataURL" su "HTMLCanvasElement": non è possibile esportare i canvas contaminati. Cosa dovrei fare?

187 javascript html5-canvas

11

Orientamento Exif lato client JS: ruota e specchia immagini JPEG

Le foto delle fotocamere digitali vengono spesso salvate come JPEG con un tag "orientamento" EXIF. Per una corretta visualizzazione, le immagini devono essere ruotate / specchiate a seconda dell'orientamento impostato, ma i browser ignorano queste informazioni che rendono l'immagine. Anche nelle grandi app Web commerciali, il supporto per l'orientamento EXIF …

154 javascript rotation html5-canvas exif

14

HTML5 Canvas Resize (Downscale) Immagine di alta qualità?

Uso elementi canvas html5 per ridimensionare le immagini nel mio browser. Si scopre che la qualità è molto bassa. Ho trovato questo: disabilita l'interpolazione quando ridimensiona un <canvas> ma non aiuta ad aumentare la qualità. Di seguito è riportato il mio codice CSS e JS, nonché l'immagine scaricata con Photoshop …

149 javascript css html canvas html5-canvas

10

come disegnare una curva uniforme attraverso N punti usando javascript HTML5 canvas?

Per un'applicazione di disegno, sto salvando le coordinate del movimento del mouse su un array, quindi le disegno con lineTo. La linea risultante non è liscia. Come posso produrre una singola curva tra tutti i punti raccolti? Ho cercato su google ma ho trovato solo 3 funzioni per disegnare linee: …

133 javascript canvas html5-canvas bezier spline

11

Come correggere l'errore getImageData () La tela è stata contaminata da dati di origine incrociata?

Il mio codice funziona molto bene sul mio localhost ma non funziona sul sito. Ho ricevuto questo errore dalla console, per questa riga .getImageData(x,y,1,1).data: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. parte del mio codice: jQuery.Event.prototype.rgb=function(){ var x = this.offsetX || …

131 javascript html html5-canvas

8

Accesso ai dati di rotazione JPEG EXIF in JavaScript sul lato client

Vorrei ruotare le foto in base alla loro rotazione originale, come impostata dalla fotocamera nei dati immagine JPEG EXIF. Il trucco è che tutto questo dovrebbe avvenire nel browser, utilizzando JavaScript e <canvas>. In che modo JavaScript può accedere a JPEG, un oggetto API file locale, locale <img>o remoto <img>, …

125 javascript jpeg exif html5-canvas

6

Cambiare lo sfondo di three.js in trasparente o in un altro colore

Ho provato a cambiare quello che sembra essere il colore di sfondo predefinito della mia tela da nero a trasparente / qualsiasi altro colore, ma senza fortuna. Il mio HTML: <canvas id="canvasColor"> Il mio CSS: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> Come puoi vedere nel …

122 css html canvas html5-canvas three.js

9

C'è qualche motivo per utilizzare WebGL invece di 2D Canvas per giochi / app 2D?

C'è qualche motivo, oltre alle prestazioni, per utilizzare WebGL invece di 2D-Canvas per giochi / app 2D ? In altre parole, quali funzionalità 2D sono offerte da WebGL che non è possibile ottenere facilmente con 2D-Canvas?

112 html html5-canvas webgl

7

Come allineare l'elemento posizionato in modo assoluto al centro?

Sto cercando di impilare due tele insieme e renderle una tela a doppio strato. Ho visto un esempio qui: <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> Ma vorrei allineare …

103 css html5-canvas

Domande taggate «html5-canvas»