Articles of html5 canvas

Come anti-alias bordi della clip () nella canvas html5 in Chrome Windows?

Sto usando la funzione clip () su una canvas. risultati: Come puoi vedere la versione cromata presenta orli / alias orribili lungo i bordi. Come posso risolvere questo? Codice da riprodurre: http://jsfiddle.net/ZRA76/ : ​ cv = document.getElementById(“test”); ctx = cv.getContext(“2d”); var im = new Image(); im.onload = function () { ctx.beginPath(); ctx.arc(110, 110, 100, 0, […]

Rendering di elementi HTML su

C’è un modo per avere un elemento HTML arbitrario reso in una canvas (e quindi accedere al suo buffer …).

CanvasCaptureMediaStream / MediaRecorder Frame Synchronization

Quando usi CanvasCaptureMediaStream e MediaRecorder , c’è un modo per ottenere un evento su ciascun frame? Ciò di cui ho bisogno non è diverso da requestAnimationFrame() , ma ne ho bisogno per CanvasCaptureMediaStream (e / o MediaRecorder) e non per la finestra. MediaRecorder potrebbe essere in esecuzione a una frequenza fotogrammi diversa rispetto alla finestra […]

Disegna il percorso della canvas HTML5 / Javascript nel tempo

Diciamo che ho un percorso: var context = canvas.getContext(‘2d’); context.beginPath(); context.moveTo(100, 20); context.lineTo(200, 160); context.quadraticCurveTo(230, 200, 250, 120); context.bezierCurveTo(290, -40, 300, 200, 400, 150); context.lineTo(500, 90); context.lineWidth = 5; context.strokeStyle = ‘blue’; context.stroke(); Questo stampa il percorso tutto in una volta: Come posso dividere il percorso in sottocavi di una determinata lunghezza? Ad esempio: context.splitCurrentPathIntoSubPath(0, […]

Tela HTML, posizione del mouse dopo la scala e traduzione

Ho implementato una funzione di zoom nella mia canvas proprio come questa: Ingrandisci su un punto (usando la scala e traduci) Ora ho bisogno di calcolare la posizione del mouse in relazione alla canvas, ho provato prima in questo modo: var rect = this._canvas.getBoundingClientRect(); var x = ((event.clientX – rect.left) / (rect.right – rect.left) * […]

addEventListener per keydown su Canvas

Sto cercando di creare un’app canvas che risponda all’input della tastiera e del mouse. Ho questo codice: canvas = document.getElementById(‘canvas’); canvas.addEventListener(‘mousedown’, function(event) { alert(‘mousedown’); }, false); canvas.addEventListener(‘keydown’, function(event) { alert(‘keydown’); }, false); L’avviso ‘mousedown’ viene visualizzato ogni volta che clicco il mouse, ma l’avviso ‘keydown’ non viene mai visualizzato. Lo stesso codice funziona bene su […]

Come pixelare un’immagine con canvas e javascript

Ho sperimentato un po ‘con l’elemento canvas ed ero curioso di come ottenere un effetto. Ho in qualche modo ottenuto ciò che sto cercando da una serie di tutorial e demo, ma ho bisogno di assistenza per ottenere il resto del modo lì. Quello che sto cercando è di pixelare un’immagine sul mouseover , quindi […]

eliminazione di aree circolari da Canvas HTML5

Sembra che l’unico modo per cancellare una regione da una canvas sia usare il comando clearRect () – Ho bisogno di cancellare una circonferenza (sto mascherando le aree da una canvas piena, punto luci in questo caso specifico) e nonostante tutti i tentativi non sembra ansible Ho provato a disegnare un cerchio con un valore […]

impostazione di canvas con qualità jpgDataURL

Voglio impostare le impostazioni di qualità quando codifico un elemento canvas su jpg. var data = myCanvas.toDataURL( “image/jpeg” ); non mi dà un’opzione di qualità. C’è una libreria alternativa che posso usare? Correlato: qual è l’impostazione di qualità predefinita utilizzata dai diversi browser?

Modifica dello sfondo three.js in trasparenza o altro colore

Ho cercato di cambiare quello che sembra essere il colore di sfondo predefinito della mia canvas, da nero a trasparente / qualsiasi altro colore, ma senza fortuna. Il mio HTML: Il mio CSS: #canvasColor { z-index: 998; opacity:1; background: red; } Come puoi vedere nel seguente esempio online, ho aggiunto un’animazione alla canvas, quindi non […]