Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (2) – neue Funktionen von HTML5-H5-Tutorial-php.cn

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (2) – neue Funktionen von HTML5

黄舟

Freigeben： 2017-01-22 10:24:57

Original

1185 Leute haben es durchsucht

1. Canvas

Der Canvas ist ein Bereich auf der Webseite, der mit JavaScript gezeichnet werden kann. Als nächstes erstellen wir eine Leinwand und zeichnen einen Panzer darauf (wir werden später HTML5 verwenden, um ein Panzerkampfspiel zu erstellen:

<!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>

Nach dem Login kopieren

Laufeffekt:

<). 🎜> Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (2) – neue Funktionen von HTML5

2. Geografischer Standort

Die geografische Standortfunktion von Html5 kann den geografischen Standort des Webseitenbesuchers zurückgeben. Führen Sie zum Testen den folgenden Code aus:

<!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>

Nach dem Login kopieren

Ausführungsergebnisse:

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (2) – neue Funktionen von HTML5

3. Reichhaltige und leistungsstarke Formulare

HTML5 bietet Formularverbesserungen Funktionen: Diese Funktionen sind in hochentwickeltem JavaScript geschrieben, um in allen Browsern zu funktionieren.

4 Lokaler Speicher

Der lokale Speicher von HTML5 ähnelt Cookies, unterstützt jedoch gespeicherte Daten. Er ist größer und bietet eine lokale Datenbank-Engine, die das Verwalten und Abrufen von Daten erleichtert. Diese Funktion kann Daten sehr gut an Benutzer verteilen und die Verbindung mit dem Server entlasten. Darüber hinaus kann JavaScript verwendet werden, um von lokalen Webseiten aus auf lokale Datenbanken zuzugreifen. Dies bedeutet, dass Sie Webseiten in Ihrem lokalen Bereich speichern und sie öffnen können, wenn Sie von der Arbeit nach Hause kommen, ohne eine Verbindung zum Internet herzustellen.

5. Medien

Der vielleicht am meisten hervorgehobene Teil der HTML5-Spezifikation ist die integrierte Multimedia-Wiedergabefunktion des HTML5-Browsers, für die keine Plug-Ins wie Flash und Microsoft Media erforderlich sind Spieler.

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

Nach dem Login kopieren

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (2) – neue Funktionen von HTML5

6. Sprachsuchfunktion:

Sie können die Sprachsuchfunktion jetzt auf vielen Websites sehen, und HTML5 bietet eine leistungsstarke Sprachsuche Funktionsattribute müssen nur ein Attribut hinzufügen, um dies zu erreichen.

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

Nach dem Login kopieren

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (2) – neue Funktionen von HTML5

Das Obige ist der Inhalt von Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (2) – die neuen Funktionen von HTML5. Für weitere verwandte Inhalte achten Sie bitte auf PHP Chinesische Website (www.php.cn)!