Maison > Article > interface Web > Le chemin de Xiaoqiang vers le développement mobile HTML5 (2) – nouvelles fonctionnalités de HTML5

Le chemin de Xiaoqiang vers le développement mobile HTML5 (2) – nouvelles fonctionnalités de HTML5

黄舟original: 2017-01-22 10:24:571172parcourir

1. Canvas

Le canevas est une zone de la page Web sur laquelle il est possible de dessiner à l'aide de JavaScript. Ensuite, nous créons une toile et dessinons un char dessus (nous utiliserons HTML5 pour créer un jeu de combat de chars plus tard). Le code est le suivant :

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8"/>  
</head>  
<body>  
<h1>html5-坦克大战</h1>  
<!--坦克大战的战场-->  
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>  
<script type="text/javascript">  
    //得到画布  
    var canvas1 = document.getElementById("tankMap");  
      
    //定义一个位置变量  
    var heroX = 80;  
    var heroY = 80;  
      
    //得到绘图上下文  
    var cxt = canvas1.getContext("2d");  
    //设置颜色  
    cxt.fillStyle="#BA9658";  
    //左边的矩形  
    cxt.fillRect(heroX,heroY,5,30);  
    //右边的矩形  
    cxt.fillRect(heroX+17,heroY,5,30);  
    //画中间的矩形  
    cxt.fillRect(heroX+6,heroY+5,10,20);  
    //画出坦克的盖子  
    cxt.fillStyle="#FEF26E";  
    cxt.arc(heroX+11,heroY+15,5,0,360,true);  
    cxt.fill();  
    //画出炮筒  
    cxt.strokeStyle="#FEF26E";  
    cxt.lineWidth=1.5;  
    cxt.beginPath();  
    cxt.moveTo(heroX+11,heroY+15);  
    cxt.lineTo(heroX+11,heroY);  
    cxt.closePath();  
    cxt.stroke();  
      
      
</script>  
</body>  
</html>

Effet de course :

<.> Le chemin de Xiaoqiang vers le développement mobile HTML5 (2) – nouvelles fonctionnalités de HTML5

2. Localisation géographique

La fonction de localisation géographique de Html5 peut renvoyer la localisation géographique du visiteur de la page Web. Exécutez le code suivant pour tester :

<!DOCTYPE html>  
<html>  
<body>  
<p id="demo">点击这个按钮，获得您的位置：</p>  
<button onclick="getLocation()">试一下</button>  
<p id="mapholder"></p>  
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>  
<script>  
var x=document.getElementById("demo");  
function getLocation()  
  {  
  if (navigator.geolocation)  
    {  
    navigator.geolocation.getCurrentPosition(showPosition,showError);  
    }  
  else{x.innerHTML="Geolocation is not supported by this browser.";}  
  }  
  
function showPosition(position)  
  {  
  lat=position.coords.latitude;  
  lon=position.coords.longitude;  
  latlon=new google.maps.LatLng(lat, lon)  
  mapholder=document.getElementById(&#39;mapholder&#39;)  
  mapholder.style.height=&#39;250px&#39;;  
  mapholder.style.width=&#39;500px&#39;;  
  
  var myOptions={  
  center:latlon,zoom:14,  
  mapTypeId:google.maps.MapTypeId.ROADMAP,  
  mapTypeControl:false,  
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}  
  };  
  var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);  
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});  
  }  
  
function showError(error)  
  {  
  switch(error.code)   
    {  
    case error.PERMISSION_DENIED:  
      x.innerHTML="User denied the request for Geolocation."  
      break;  
    case error.POSITION_UNAVAILABLE:  
      x.innerHTML="Location information is unavailable."  
      break;  
    case error.TIMEOUT:  
      x.innerHTML="The request to get user location timed out."  
      break;  
    case error.UNKNOWN_ERROR:  
      x.innerHTML="An unknown error occurred."  
      break;  
    }  
  }  
</script>  
</body>  
</html>

Résultats d'exécution :

Le chemin de Xiaoqiang vers le développement mobile HTML5 (2) – nouvelles fonctionnalités de HTML5

Formulaires riches et puissants

HTML5 fournit des améliorations de formulaire. Caractéristiques, ces fonctions sont écrites en JavaScript sophistiqué pour fonctionner sur tous les navigateurs.

4. Stockage local

Le stockage local HTML5 est similaire aux cookies, mais il prend en charge les données stockées. Il est plus grand et fournit un moteur de base de données local, facilitant la maintenance et la récupération des données. Cette fonctionnalité peut très bien distribuer les données aux utilisateurs et soulager la pression sur la connexion avec le serveur. De plus, JavaScript peut être utilisé pour accéder aux bases de données locales à partir de pages Web locales, ce qui signifie que vous pouvez enregistrer des pages Web dans votre région et les ouvrir lorsque vous rentrez du travail sans vous connecter à Internet.

5. Médias

La partie la plus importante de la spécification HTML5 est peut-être la fonction de lecture multimédia intégrée du navigateur HTML5, qui ne nécessite pas de plug-ins tels que Flash et Microsoft Media. Joueur.

<!DOCTYPE HTML>  
<html>  
<body>  
  
<video src="/i/movie.ogg" controls="controls">  
your browser does not support the video tag  
</video>  
  
</body>  
</html>

Le chemin de Xiaoqiang vers le développement mobile HTML5 (2) – nouvelles fonctionnalités de HTML5

6. Fonction de recherche vocale :

Vous pouvez désormais voir la fonction de recherche vocale sur de nombreux sites Web, et HTML5 fournit une puissante recherche vocale. L'attribut de fonction n'a besoin d'ajouter qu'un seul attribut pour y parvenir.

<!DOCTYPE html>  
<head>  
    <meta charset="utf-8"/>  
</head>  
<body>  
    <h1>语音搜素功能</h1>  
    <input type="text" name="yuyin" id="yuyin" x-webkit-speech/>  
</body>

Le chemin de Xiaoqiang vers le développement mobile HTML5 (2) – nouvelles fonctionnalités de HTML5

Ce qui précède est le contenu de la route de développement mobile HTML5 de Xiaoqiang (2) - les nouvelles fonctionnalités de HTML5. Pour plus de contenu connexe, veuillez faire attention au PHP. Site chinois (www .php.cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le chemin de Xiaoqiang vers le développement mobile HTML5 (1) - Introduction au HTMLArticle suivant：Le chemin de Xiaoqiang vers le développement mobile HTML5 (1) - Introduction au HTML

Articles Liés

Voir plus