Polygone redimensionnable de canevas HTML5

Question

J'ai besoin d'un remplissage de couleur de polygone en diagonale qui redimensionne en fonction de la largeur/hauteur de l'écran. Le fond vert remplir ici: http://rhiwifi.co/bus est un prototype qui utilise un DIV tourné. Ce DIV est 200% de l'écran, de sorte qu'il s'étend au-delà des limites de l'interface mobile et ne remplit pas le bas de l'écran correctement.

Comment puis-je dessiner un polygone redimensionnable en diagonale en haut et rectangulaire en bas? Ou y a-t-il un moyen plus facile?

Answer 1

Je stockerais simplement les ordonnées comme valeurs proportionnelles, plutôt que comme pixels absolus. C'est-à-dire que j'utiliserais des nombres dans l'intervalle [0..1] pour définir un point. Ensuite, il vous suffit de multiplier cela par les dimensions de votre toile pour obtenir les dimensions en pixels. Par exemple, si vous voulez dessiner un rect qui occupe le quart supérieur gauche de la toile, définissez-le ainsi: "0,0,0.5,0.5" - vous pouvez ensuite diviser en un tableau basé sur des virgules. Vous pouvez ensuite multiplier chaque élément du tableau par la taille de la toile pour obtenir les coordonnées finales. La fenêtre 2d OpenGL, par exemple utilise des coordonnées normalisées, où 0,0 est le centre de l'écran, -1, -1 le coin supérieur gauche, 1,1 est le coin inférieur droit. De cette façon, openGL se multiplie juste par la taille de la fenêtre pour obtenir des valeurs de pixels.