Une brève discussion sur ce que Canvas peut faire ?

Le contenu de cet article est de parler brièvement de ce que Canvas peut faire ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile. Que peut faire

canvas ?

canvas est un nouvel élément en HTML5. Vous pouvez utiliser javascript pour dessiner des graphiques, des icônes et tout autre élément. images visuelles. Il peut également être utilisé pour créer des effets d’image et des animations. Si vous maîtrisez l'ensemble complet des commandes, vous pouvez créer des applications Web riches avec Canvas. Si vous souhaitez bien utiliser Canvas, vous devez d'abord bien maîtriser Javascript. [Tutoriels vidéo associés recommandés : Tutoriel JavaScript]

canvastag

<canvas width="400" height="300">
</canvas>

Bien sûr, vous pouvez également réussir css Venez le régler ! Si vous ne définissez pas la largeur et la hauteur, la largeur et la hauteur par défaut sont 300*150.

Pour les navigateurs de version inférieure, vous mettez les informations dont vous avez besoin en retour entre les balises canevas.

<canvas width="400" height="300">
    <p>你想看我，就升级浏览器吧！</p>
</canvas>

Obtenez le contexte, toutes vos opérations de peinture sont dans le contexte, ne prend actuellement en charge que la 2D.

window.onad=function(){    
     var canvas = document.getElementById("myCanvas");    
     var context= can.getContext("2d");
}

Pour l'affichage Retina

Rendre la toile clairement affichée sur les écrans Retina et en définition standard est facile, il suffit de passer Il suffit de multiplier le rapport déterminé par la densité de pixels de l'écran par la toile. Tout d’abord, vous devez comprendre comment les valeurs des pixels sont stockées sur un canevas.

Le stockage de sauvegarde est la valeur de couleur de chaque pixel qui stocke les données sur le canevas. Notre objectif est d'avoir un pixel dans le back-store pour chaque pixel affiché sur la toile. Avant que les pixels ne soient poussés vers l'écran, leurs valeurs sont calculées ici. Cependant, le nombre de pixels représentés dans la mémoire de sauvegarde peut ne pas être égal au nombre de pixels poussés vers l'écran. Sur les appareils Retina, la largeur et la hauteur du canevas sont doublées pour conserver une taille et une position cohérentes par rapport aux autres éléments HTML et, par conséquent, il s'étire et obscurcit son contenu. Pour contrecarrer cet étirement, vous devez doubler la largeur et la hauteur du magasin de support de manière appropriée.

Si vous traitez des images raster ou des données vidéo, découvrez comment optimiser davantage le canevas pour le « traitement des pixels pour les écrans Retina ». Puisque dans tous les cas, un canevas plus grand peut ne pas être bénéfique, vous devez choisir Optimisation. Votre canevas est destiné aux appareils Retina. Tout d’abord, assurez-vous que le moniteur qui affiche votre toile est bien prêt pour Retina. Si tel est le cas, redimensionnez le magasin de sauvegarde en fonction du rapport de pixels de l'appareil.

D'une part, les appareils Retina ont un rapport de pixels de 2 car il existe un rapport de 2:1 entre les pixels d'affichage et les pixels de stockage de sauvegarde dans les directions x et y. Les moniteurs de définition standard, en revanche, mappent 1 pixel de stockage de sauvegarde sur 1 pixel d'affichage, de sorte que le rapport de pixels de leur appareil sera toujours de 1.

En JavaScript, vous pouvez déterminer les facteurs qui déterminent le taux de repli. Tout d’abord, vérifiez si le navigateur a défini window.devicePixelRatio. Si le rapport de pixels de l'appareil est supérieur à 1, l'utilisateur est sur un écran Retina. Le code permettant de déterminer le taux de sauvegarde approprié est le suivant :

window.onload=function(){
       var canvas = document.getElementById("myCanvas");
      var context= canvastContext("2d");
       var scaleFactor = backingScale(ctx);
       if (scaleFactor > 1) {
              canvas.width = canvas.width * scaleFactor;
              canvas.height = canvas.height * scaleFactor;
              // update the context for the new canvas scale
              var context = canvas.getContext("2d");
       }
}
 function backingScale(context) {
              if ('devicePixelRatio' in window) {
                     if (window.devicePixelRatio > 1) {
                            return window.devicePixelRatio;
                     }
              }
              return 1;

}

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!