HTML5 et Canvas défilement: truc intéressant ou inutile?

Sur un semi-moderne+ ordinateur avec un semi-récent+ navigateur le plus rapide chose à faire est probablement de prendre un super long de la div avec des images d'arrière-plan, réglez le débordement cachés et faites défiler en ajustant scrollLeft ou scrollTop propriétés. C'est BEAUCOUP plus rapide que le réglage des propriétés CSS comme il ne devrait pas déclencher une redistribution de calcul dans le moteur CSS. Fondamentalement, chaque fois que vous touchez une propriété DOM qui pourrait avoir CSS impact, l'ensemble (ou au moins un lot de) de) la structure du document doit être re-vérifié et re-rendus.

Vous pouvez charger dans des morceaux de décors comme ils se la fermer pour éviter un géant massif du chargement de l'image. Je ne crois pas qu'il y est tout à 100% moyen infaillible pour tirer une image de la mémoire dans les navigateurs mais en enlevant les références dans les DOM ou dans votre CSS n'a sans doute pas de mal quand vous avez suffisamment défilée passé un morceau de votre arrière-plan. De cette façon, le navigateur du garbage collector au moins a l'option d'effacement de la mémoire.

Dans la casserole-mobile solutions qui s'appuient sur les webviews (comme Cordova/Phonegap), cependant, bien, c'est pourquoi je suis arrivé à cette question.

Je n'ai aucune idée, mais je suis assez sûr de mélange de HTML et de la toile est une bien mauvaise idée à des fins de performance. Droit maintenant, j'ai pas super compliqué android jeu d'étouffement sur 50x50 100px tuiles dans une toile d'élément dans un android affichage web qui a aussi du HTML de base dans le mélange pour des choses comme les contrôles et la séparation d'un couple d'autres éléments de canevas à partir du repos. J'ai pratiquement un vol d'oiseau-vue navire de croisière autour et faire des scans avec un fromage rayonnant cercle direction artistique qui révèle des éléments sur une carte brouillard de guerre " de style. Fonctionne très bien dans un navigateur. Complète en cas de catastrophe dans le cordova version de l'application.

Je crois que la seule façon que je vais réaliser mon pan-mobile game dev rêves est d'utiliser l'un des nombreux openGL enveloppé dans une toile de l'API de solutions là-bas et complètement abandonner le HTML que je trouve damnés pratique pour la mise en œuvre de l'INTERFACE utilisateur, étant donné que la majeure partie de mon expérience dans le web est l'INTERFACE utilisateur. Une autre astuce pour l'affichage web HTML est d'éviter de se déplacer à l'intérieur des éléments internes si vous le pouvez (il suffit donc de laisser le corps de la poignée de débordement). Le défilement de débordement dans quoi que ce soit, mais le corps n'a même pas travailler dans Android 2 webviews et il semble toujours à cause 4.1 position de starter sur une version antérieure/version simplifiée de l'application que je suis en train de travailler sur.

OriginalL'auteur Erik Reppen

Voici une démo de défilement surdimensionné de la toile en modifiant le CSS de la marge, celui-ci basé sur le défilement avec le temps: https://jsfiddle.net/6othtm0c/

Et cette version avec la souris en faisant glisser: https://jsfiddle.net/ax7n8944/

HTML:

<div id="canvasdiv" style="width: 500px; height: 250px; overflow: hidden">
    <canvas id="canvas" width="10000px" height="250px"></canvas>
</div>

JS pour le défilement avec la version d':

canvas = document.getElementById("canvas");
context = canvas.getContext('2d');

for (var i = 0; i < 1000; i++) {
    context.beginPath();
    context.arc(Math.random() * 10000, Math.random() * 250, 20.0, 0, 2 * Math.PI, false);
    context.stroke();
} 

var t0 = window.performance.now();
setInterval(function(){
    canvas.style.marginLeft = -(window.performance.now() - t0)/5 + "px";
}, 5);

OriginalL'auteur pancake