Articles of html5 canvas

Ridimensiona un’immagine Base 64 in JavaScript senza usare canvas

Ho bisogno di un modo per ridimensionare le immagini in JavaScript senza utilizzare un elemento HTML. La mia app HTML mobile acquisisce le immagini e le converte in stringhe base64. Successivamente ho bisogno di ridimensionarli prima che vengano inviati all’API per risparmiare spazio di archiviazione. Sto cercando un modo diverso e più adatto per ridimensionarli, […]

Voglio fare l’animazione di un object lungo un percorso particolare

Devo spostare il piccolo rettangolo sul percorso. Il rettangolo si sposta dopo un clic all’interno dell’area di disegno. Non sono in grado di animarlo poiché l’object salta semplicemente al punto richiesto. Si prega di trovare il codice su Fiddle . HTML CSS #myCanvas { width:578px; height:200px; border:2px thin; } JavaScript var myRectangle = { x: […]

event.offsetX in Firefox

Insert title here function main(){ var canvas = document.getElementById(“canvas”); canvas.addEventListener(“mousemove”, function(e){ if (!e) e = window.event; var ctx = canvas.getContext(“2d”); var x = e.offsetX; var y = e.offsetY; ctx.fillRect(x, y, 1, 1); }); } Si prega di considerare l’esempio rapido e sporco di cui sopra. Si prega di notare che la mia canvas è contenuta […]

Cattura fotogrammi dal video con HTML5 e JavaScript

Voglio catturare una cornice dal video ogni 5 secondi. Questo è il mio codice JavaScript: video.addEventListener(‘loadeddata’, function() { var duration = video.duration; var i = 0; var interval = setInterval(function() { video.currentTime = i; generateThumbnail(i); i = i+5; if (i > duration) clearInterval(interval); }, 300); }); function generateThumbnail(i) { //generate thumbnail URL data var context […]

Come posso correggere il testo sfocato nella mia canvas HTML5?

Sono un n00b totale con HTML5 e sto lavorando con il canvas per il rendering di forms, colors e testo. Nella mia app, ho un adattatore di visualizzazione che crea una canvas in modo dinamico e la riempie di contenuto. Funziona molto bene, tranne che il mio testo è reso molto sfocato / sfocato / […]

Come rendere l’effetto testo del tetto e l’effetto testo valle in HTML5 (o Fabric.js)

Sto usando sotto il codice: // Curve: 110 OffsetY: 0 Text height: 64 Bottom: 200 Text: Ho bisogno dell’effetto di testo come sotto le immagini, ho provato molto per farlo ma non posso. Per favore qualcuno può aiutarmi? Possiamo anche usare l’object attivo da fabric.js con il contesto?

Manipolazione delle immagini e mapping delle texture con HTML5 Canvas?

In un motore 3D su cui sto lavorando sono riuscito a disegnare un cubo in 3D. L’unico metodo per riempire i lati è usare un colore a tinta unita o una sfumatura per quanto mi riguarda. Per rendere le cose più eccitanti, mi piacerebbe davvero implementare il mapping delle texture usando una semplice bitmap. Il […]

Ritaglio delle immagini nel browser PRIMA del caricamento

Molte librerie che ho trovato, come Jcrop, non eseguono il ritaglio, ma creano solo un’interfaccia utente per il ritaglio di immagini. Dipende quindi dal server che esegue il ritaglio effettivo. Come posso rendere l’immagine ritagliata lato client utilizzando alcune funzionalità HTML5 senza utilizzare alcun codice lato server. Se sì, ci sono alcuni esempi o suggerimenti?

Ottenere dati binari (base64) da Canvas HTML5 (readAsBinaryString)

C’è un modo per leggere il contenuto di una canvas HTML come dati binari? Al momento ho il seguente codice HTML per mostrare un file di input e la canvas sottostante: Get Image Content Input: Canvas Ho quindi impostato il mio file di input per impostare correttamente il canvas che funziona bene: $(‘#fileInput’).on(‘change’, function() { […]

Ridimensiona l’immagine con canvas javascript (senza intoppi)

Sto cercando di ridimensionare alcune immagini con la canvas ma non ho idea di come renderle più morbide. Su Photoshop, browser ecc. Ci sono alcuni algoritmi che usano (es. Bicubico, bilineare) ma non so se questi sono incorporati nella canvas o no. Ecco il mio violino: http://jsfiddle.net/EWupT/ var canvas = document.createElement(‘canvas’); var ctx = canvas.getContext(‘2d’); […]