toile HTML - dessin disparaissent le redimensionnement

Question

J'ai créé une forme de base dans l'élément de toile HTML qui fonctionne très bien.

Le problème se produit lorsque je redimensionne la toile, tout le dessin dans la toile disparaît. Est-ce le comportement normal? ou existe-t-il une fonction qui peut être utilisée pour arrêter cela?

Une façon de résoudre ce problème pourrait être d'appeler la fonction dessin sur toile redimensionne mais cela peut ne pas être très efficace s'il est énorme contenu à tirer.

Quelle est la meilleure façon?

Voici le lien pour exemples de code https://gist.github.com/2983915

Answer 1

Vous devez redessiner la scène lorsque vous redimensionnez.

La définition de la largeur ou de la hauteur d'une zone de dessin, , même si vous la définissez à la même valeur qu'avant, non seulement efface le canevas, mais réinitialise l'intégralité du canevas. Toutes les propriétés de réglage (fillStyle, lineWidth, la zone de découpage, etc.) seront également remis à zéro. Si vous n'avez pas la possibilité de redessiner la scène à partir des structures de données que vous pouvez représenter, vous pouvez toujours enregistrer l'ensemble du canevas lui-même en le dessinant dans un canevas en mémoire, en définissant la largeur d'origine et dessiner la toile en mémoire à la toile d'origine.

Voici un exemple vraiment rapide d'enregistrer le bitmap de toile et de le remettre après une Redimensionner:

http://jsfiddle.net/simonsarris/weMbr/

Answer 2

Chaque fois que vous redimensionnez la toile, il se remettra à zéro à transparant noir, as defined in the spec.

Vous devez soit:

• redessiner lorsque vous redimensionnez la toile, ou,
• ne redimensionne pas la toile

Answer 3

J'ai aussi rencontré ce problème.Mais après une expérience, je trouve que Redimensionner l'élément de toile efface automatiquement tous les dessins de la toile! juste essayer le code ci-dessous

<canvas id = 'canvas'></canvas> 
<script> 
    var canvas1 = document.getElementById('canvas') 
    console.log('canvas size',canvas1.width, canvas1.height) 
    var ctx = canvas1.getContext('2d') 
    ctx.font = 'Bold 48px Arial' 
    var f = ctx.font 
    canvas1.width = 480 
    var f1 = ctx.font 
    alert(f === f1) //false 
</script>