Articles of html5 canvas

trascinando e ridimensionando un’immagine su canvas html5

Sto costruendo un editor di immagini su canvas HTML5. Dopo aver caricato un’immagine nella canvas ho bisogno di Dragg e ridimensionarlo sulla canvas. Sono riuscito a caricare un’immagine e renderla trascinabile sulla canvas. Ma ho bisogno di renderlo ridimensionabile anche lungo la canvas. Grazie in anticipo. var Img = new Image(); Img.src = file; Img.onload […]

Più aree di ritaglio sulla canvas Fabric.js

Per creare Photo Collage Maker , utilizzo fabric js con funzionalità di ritaglio basato su oggetti. Questa funzione è ottima ma l’immagine all’interno dell’area di ritaglio non può essere ridimensionata, spostata o ruotata. Voglio che la regione di clipping della posizione fissa e l’immagine possano essere posizionate all’interno dell’area di clipping fissa come l’utente desidera. […]

Come mostrare una barra di avanzamento in esecuzione mentre la pagina si sta caricando

Voglio mostrare una barra di avanzamento in esecuzione mentre la mia pagina si sta caricando come qui , nella mia pagina. Ho usato una semplice immagine di caricamento nel mio esempio, ma voglio convertirla in una barra di avanzamento in esecuzione. Ecco il mio codice: $(window).load(function() { alert(“hi”); $(‘#loading’).hide(); }); #loading { width: 100%; height: […]

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 […]