Voglio sapere come posso tradurre un'intera scena già disegnata su una tela HTML5, ad esempio 5 pixel in basso. So che il metodo di traduzione traduce solo il sistema di coordinate della tela, ma voglio sapere se c'è un modo per tradurre l'intera scena che è già stata disegnata sulla tela.Traduzione di una tela HTML5
È possibile applicare le trasformazioni e chiamare drawImage passando tela stessa.
ctx.save();
ctx.translate(0, 5);
ctx.drawImage(canvas, 0, 0);
ctx.restore();
In tal caso, il contenuto originale sarà ancora in basso. A seconda dell'effetto che si sta tentando di eseguire, l'impostazione di GlobalCompositeOperation può essere d'aiuto.
Ma è probabile che dovrai usare drawImage per copiare prima su una seconda area, cancellare la corrente, applicare la trasformazione e disegnare dalla copia.
A meno che non si prenda uno screenshot e lo traduca.
Tuttavia, solo l'inserimento di
context.translate(0, 5)// or your values
destra prima del tuo codice di disegno dovrebbe fare il trucco.
Riferimento: MDN Canvas Tutorial (Transformations)
Ne ho già parlato, e (almeno pensavo) ho chiarito che non è quello che volevo. Quella traduzione tradurrà tutto ciò che disegno in seguito, non tutto ciò che è già disegnato. Tuttavia, la soluzione di screenshot potrebbe essere quello che volevo. Avete istruzioni su come farlo? – George
L'oggetto Canvas ha un metodo chiamatoDataUrl. Vedi questa domanda http://stackoverflow.com/questions/934012/get-image-data-in-javascript –
Questo suona come quello che volevo. Lo proverò e ti farò sapere se ha funzionato per me. – George
Questa soluzione ha funzionato benissimo per me. Tuttavia, non funziona così bene quando c'è anche il ridimensionamento. Ho una tela in cui il ridimensionamento è tale che l'area di disegno ha una larghezza e un'altezza di, ad esempio, 120000 e 60000. L'elemento canvas ha larghezza 1200 e altezza 600, quindi la trasformazione di ridimensionamento viene eseguita sul sistema di coordinate prima del disegno. Ad ogni modo, il problema è che la conversione e il ridimensionamento sfoceranno l'immagine se la copio in una seconda tela, svuota la corrente e applichi la trasformazione e la copia come hai detto tu. Volevo solo sapere se sapevi come renderlo non sfocato. – George
Sì, è esattamente quello che sta succedendo. Il problema è che se disegno dalla tela principale che ha l'alta risoluzione sulla tela di backup, verrà sempre disegnata usando la risoluzione 1200x600 di base, anziché la risoluzione 1200000x600000 in scala. Inoltre, la soluzione per andare avanti e indietro è OK per i miei scopi, dal momento che deve solo farlo quando l'utente lo desidera, e non lo farà continuamente. – George