N'HTML5/Support de la Toile Double mise en mémoire Tampon?

Ce que je voudrais faire est de dessiner mes graphiques sur un tampon et ensuite être capable de le copier tel quel dans la toile afin que je puisse faire de l'animation et d'éviter le scintillement. Mais je ne pouvais pas trouver cette option. Quelqu'un sait comment je peux aller à ce sujet?

  • Mon expérience a été que de toile de dessin est fusionné par le navigateur afin que les animations sont fluides. Pouvez-vous partager un peu de code qui scintille comme vous le décrivez?
  • J'ai remarqué, c'est à dire peut scintillement dans certains cas lors de l'utilisation de explorercanvas, mais c'est bien sûr pas le HTML5 et est un canvas élément simplement imité par VML. Je n'ai jamais vu d'autres navigateurs le font bien.
  • Liées à la stackoverflow.com/questions/11777483
  • Vraiment stupide débutant code qui ne clignote pas. jsfiddle.net/linuxlizard/ksohjr4f/3 Par tous les droits, doit clignoter. Les navigateurs sont impressionnants.
  • Vous avez seulement besoin de double mise en mémoire tampon si vous avez un async fonction draw. Tant que vous n'avez pas le rendement pour le navigateur, c'est à dire faire de dessin synchrone vous serez amende. Dès que vous ajoutez une promesse ou d'un setTimeout ou quelque chose là-bas, vous cédez au navigateur et il va attirer l'état actuel avant son fini efficacement, causant de scintillement.
InformationsquelleAutor foreyez | 2010-05-08
  1. 32

    Suivants lien utile, en plus de montrer des exemples et des avantages de l'utilisation de la double mise en tampon, montre plusieurs autres conseils de performances pour l'utilisation de l'élément html5 canvas. Il comprend des liens vers jsPerf tests, l'ensemble des résultats des tests sur tous les navigateurs dans un Browserscope base de données. Cela garantit que les conseils de performances sont vérifiées.

    http://www.html5rocks.com/en/tutorials/canvas/performance/

    Pour votre commodité, j'ai inclus un exemple minimal de efficace le double buffering comme décrit dans l'article.

    //canvas element in DOM
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');

//buffer canvas
var canvas2 = document.createElement('canvas');
canvas2.width = 150;
canvas2.height = 150;
var context2 = canvas2.getContext('2d');

//create something on the canvas
context2.beginPath();
context2.moveTo(10,10);
context2.lineTo(10,30);
context2.stroke();

//render the buffered canvas onto the original canvas element
context1.drawImage(canvas2, 0, 0);
    InformationsquelleAutor ricksuggs
  2. 83

    Une méthode très simple est d'avoir deux toile-éléments dans le même emplacement d'un écran et de définir la visibilité de la mémoire tampon que vous devez vous montrer. Dessiner sur le caché et flip lorsque vous avez terminé.

    Code:

    CSS:

    canvas { border: 2px solid #000; position:absolute; top:0;left:0; 
visibility: hidden; }

    Retournement en JS: 

    Buffers[1-DrawingBuffer].style.visibility='hidden';
Buffers[DrawingBuffer].style.visibility='visible';

DrawingBuffer=1-DrawingBuffer;

    Dans ce code, le tableau "Tampons []" tient à la fois de la toile-objets. Ainsi, lorsque vous voulez commencer à dessiner, vous avez encore besoin d'obtenir le contexte:

    var context = Buffers[DrawingBuffer].getContext('2d');
    • Solution sympa 😀
    • Hors sujet: personnellement, j'aime utiliser <noscript>, et de créer ma toile éléments en Javascript. En règle générale, vous voulez vérifier pour le support de la toile en Javascript de toute façon, alors pourquoi voudriez-vous mettre une toile de secours de message dans le HTML?
    InformationsquelleAutor Fedor van Eldijk
  3. 19

    Les navigateurs que j'ai testé tous les gérer cette mise en mémoire tampon pour vous par pas repeindre la toile jusqu'à ce que le code qui attire votre image est terminée. Voir aussi le WHATWG liste de diffusion: http://www.mail-archive.com/[email protected]/msg19969.html

    • Eh bien, j'avis un scintillement de l'écran ou de déchirure. Vous ne savez pas comment le décrire. En utilisant les dernières Chrome sur Linux.
    InformationsquelleAutor Edward Coffey
  4. 13

    Vous pouvez toujours le faire
    var canvas2 = document.createElement("canvas");
    et de ne pas ajouter à la DOM à tous.

    Viens de le dire, puisque vous semblez avoir tellement obsédés par display:none;
    il semble juste plus propre à moi et mimicks l'idée de la double mise en mémoire tampon de façon plus précise que simplement avoir un maladroitement invisible de la toile.

    InformationsquelleAutor DeadlyBacon
  5. 8

    Plus de deux ans plus tard:

    Il n'est pas nécessaire pour "manuellement" à mettre en œuvre le double buffering. M. Geary écrit à ce sujet dans son livre "HTML5 Canvas".

    Efficacement réduire le scintillement de l'utilisation requestAnimationFrame()!

    • Comment expliquez-vous les améliorations de performance qui ont été observés en utilisant le double buffering? html5rocks.com/en/tutorials/canvas/performance
    • Eh bien, le "double buffering" ou "hors-rendu" mentionnée sur html5rocks est un peu différent que je pensais. J'ai considéré DB que la permutation d'écran de pages (en vidéo), qui a seulement un pointeur opération au lieu de la copie de la mémoire de morceaux. L'OP est invité à utiliser les DB pour éviter le scintillement, ce qui est vraiment adressée par requestAnimationFrame(). Peut-être que ce article a propos de l'Écran-Rendu peut être intéressant. Là je répondre à l'OP question sur la copie et le collage de tampon de données d'image à l'écran à l'aide d'un Sprite Tampon
    InformationsquelleAutor ohager
  6. 6

    Josh demandé (un temps) sur la façon dont le navigateur sait "lorsque le processus se termine", afin d'éviter le scintillement. J'aurais commenté directement à son poste, mais mon rep n'est pas assez haut. Aussi ce n'est que mon avis. Je n'ai pas faits pour cela, mais je suis plutôt confiant à ce sujet et il peut être utile à d'autres personnes de cette lecture dans l'avenir.

    Je devine que le navigateur ne sait pas" lorsque vous avez terminé le dessin. Mais comme la plupart javascript, aussi longtemps que votre code s'exécute sans renoncer au contrôle pour le navigateur, le navigateur est essentiellement enfermé et ne sera pas/ne peut pas mettre à jour ou de faire face à son INTERFACE utilisateur. Je suppose que si vous désactivez la toile et de tirer l'ensemble de votre image sans renoncer au contrôle pour le navigateur, il ne sera pas effectivement attirer votre toile jusqu'à ce que vous avez terminé.

    Si vous définissez une situation où le rendu s'étend sur plusieurs setTimeout/setInterval/requestAnimationFrame appels, lorsque vous désactivez la toile en un seul appel et en dégager des éléments sur votre toile dans les prochains appels, répétant le cycle (par exemple) tous les 5 appels, je serais prêt à parier que vous verriez scintillement puisque la toile sera mis à jour après chaque appel.

    Cela dit, je ne suis pas sûr que j'avais confiance que. Nous sommes déjà au point que le javascript est compilée en code machine natif avant l'exécution (du moins c'est ce que google Chrome, moteur V8 ne de ce que je comprends). Je ne serais pas surpris si ce n'était pas trop long avant que les navigateurs commencé l'exécution de code javascript dans un thread séparé de l'INTERFACE utilisateur et la synchronisation de tout accès aux éléments d'INTERFACE utilisateur permettant à l'INTERFACE utilisateur de mise à jour/répondre pendant l'exécution de javascript qui n'a pas accès à l'INTERFACE utilisateur. Quand/si cela arrive (et je sais qu'il existe de nombreux obstacles à surmonter, tels que les gestionnaires d'événements de coups de pied pendant que vous vous êtes encore sous un autre code), nous allons probablement voir le scintillement sur toile d'animation qui ne sont pas en utilisant une sorte de double-buffering.

    Personnellement, j'adore l'idée de la toile de deux éléments placés sur le dessus les uns des autres et de l'alternance qui est montré/dessiné sur chaque image. Assez non intrusif et sans doute assez facilement ajouté à une application existante, avec quelques lignes de code.

    InformationsquelleAutor Lee
  7. 6

    Pour les non-croyants, voici un scintillement de code. Notez que je suis explicitement de compensation pour effacer l'ancien cercle.

    JS:

    var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function draw_ball(ball) {
ctx.clearRect(0, 0, 400, 400);
ctx.fillStyle = "#FF0000";
ctx.beginPath();
ctx.arc(ball.x, ball.y, 30, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
var deltat = 1;
var ball = {};
ball.y = 0;
ball.x = 200;
ball.vy = 0;
ball.vx = 10;
ball.ay = 9.8;
ball.ax = 0.1;
function compute_position() {
if (ball.y > 370 && ball.vy > 0) {
ball.vy = -ball.vy * 84 / 86;
}
if (ball.x < 30) {
ball.vx = -ball.vx;
ball.ax = -ball.ax;
} else if (ball.x > 370) {
ball.vx = -ball.vx;
ball.ax = -ball.ax;
}
ball.ax = ball.ax / 2;
ball.vx = ball.vx * 185 / 186;
ball.y = ball.y + ball.vy * deltat + ball.ay * deltat * deltat / 2
ball.x = ball.x + ball.vx * deltat + ball.ax * deltat * deltat / 2
ball.vy = ball.vy + ball.ay * deltat
ball.vx = ball.vx + ball.ax * deltat
draw_ball(ball);
}
setInterval(compute_position, 40);

    HTML:

    <!DOCTYPE html>
<html>
<head><title>Basketball</title></head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body></html>

    • Ne semble pas de scintillement pour moi, du moins pas quand la balle ne bouge pas plus que son rayon de chaque image. Chrome/Windows.
    • J'ai ajouté un appel à requestAnimFrame - voir ici - à votre exemple sur jsfiddle.net/GzSWJ/28 - elle ne clignote pas plus
    InformationsquelleAutor John
  8. 5

    Il n'y a pas de scintillement dans les navigateurs web! Ils ont déjà une double mise en mémoire tampon pour leur rendu. Js moteur de réaliser toutes vos rendu avant de le montrer. Aussi, le contexte d'enregistrer et de restaurer uniquement la pile de transformation de la matrice de données et, ce n'est pas la toile contenu lui-même.
    Donc, vous n'avez pas besoin ou envie dbl tampon!

    • Pouvez-vous fournir des preuves de vos allégations?
    • Je ne trouve pas l'aide de DB résultats de mauvaise saccade dans les animations, je havn'pas essayé encore DB
    InformationsquelleAutor Luka
  9. 4

    Plutôt que de rouler vos propres, vous allez probablement obtenir le meilleur kilométrage à l'aide d'une bibliothèque existante pour la création de nettoyer et de scintillement d'animations JavaScript:

    Voici un populaire: http://processingjs.org

    • Exactement! Pourquoi s'embêter et écrire 10 lignes de votre propre code, quand vous pouvez simplement utiliser un ensemble de 275KB bibliothèque sans avoir la moindre idée de ce sujet!? Oui, j'étais sarcastique.
    • Yeesh, dure beaucoup?
    InformationsquelleAutor a7drew
  10. 2

    Opera 9.10 est très lent et montre le processus de dessin. Si vous voulez voir un navigateur de ne pas utiliser le double buffering, essayez Opera 9.10 sur.

    Certaines personnes ont suggéré que les navigateurs sont en quelque sorte déterminer si le processus se termine, mais pouvez-vous expliquer comment tout cela peut fonctionner? Je n'ai pas remarqué de toute évidence scintillement dans Firefox, Chrome ou IE9, même lorsque le dessin est lent donc il semble que c'est ce qu'ils font mais comment cela est accompli, c'est un mystère pour moi. Comment le navigateur jamais savoir qu'elle est l'actualisation de l'affichage juste avant plus de dessins et instructions doivent être exécutées? Pensez-vous qu'ils juste à temps donc, si un intervalle de plus de 5ms ou alors ne passe sans que l'exécution d'une toile dessin instruction, il suppose qu'il peut en toute sécurité, le remplacement des tampons?

    InformationsquelleAutor Josh
  11. 2

    vous avez besoin de 2 toile: (avis de la propriété css z-index et position:absolute)

    <canvas id="layer1" width="760" height="600" style=" position:absolute; top:0;left:0; 
visibility: visible;  z-index: 0; solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="layer2" width="760" height="600" style="position:absolute; top:0;left:0; 
visibility: visible;  z-index: 1; solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

    vous pouvez remarquer que la première toile est visible et le deuxième il est caché, l'idée c'est de tirer sur le caché après que nous cachent les visibles et cachés toile visible. quand il est caché, 'clair caché toile

    <script type="text/javascript">
var buff=new Array(2);
buff[0]=document.getElementById("layer1");
buff[1]=document.getElementById("layer2");
ctx[0]=buff[0].getContext("2d");
ctx[1]=buff[1].getContext("2d");
var current=0;
//draw the canvas (ctx[ current ]);
buff[1- current ].style.visibility='hidden';
buff[ current ].style.visibility='visible';
ctx[1-current].clearRect(0,0,760,600);
current =1-current;
    InformationsquelleAutor Aviad Gispan
  12. 2

    Dans la plupart des cas, vous n'avez pas besoin de le faire, le navigateur met en œuvre pour vous. Mais pas toujours utile!

    Vous avez encore de mettre en œuvre la présente lorsque votre dessin est très compliqué.
    La plupart de l'écran de mise à jour tarif est de 60 hz, cela signifie que les mises à jour d'écran par 16ms. Le navigateur du taux de mise à jour peut près ce nombre. Si votre forme nécessité de 100ms à être terminé, vous verrez une forme inachevée. De sorte que vous pouvez mettre en œuvre le double buffering dans cette situation.

    J'ai fait un test: Clear a rect, wait for some time, then fill with some color. Si j'ai mis du temps à 10ms, je ne les vois pas de scintillement. Mais si je l'ai mis à 20ms, le scintillement se produit.

    InformationsquelleAutor Chien-Wei Huang