html5学习（1）——html5的主要新特性_使用cxt.closepath(),表示对当前路径进行关闭,该路径终点和起点会自动闭合。-优快云博客

本文链接：https://blog.youkuaiyun.com/tanyouhao/article/details/21184249

本文介绍了HTML5 canvas的基本概念，包括如何使用canvas元素在网页上绘制图像，并通过实例展示了如何绘制直线、路径、矩形、圆以及图像。此外，还讲解了HTML5的定位功能，如何使用Google Map和百度地图API进行地理定位。同时，文章还涉及了离线存储的概念，解释了它在提高用户体验方面的优势。最后，展示了如何利用HTML5内置的video标签进行媒体播放。

一、画布

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

<!doctype html>
<html>
<head>
	<title>坦克大战</title>
	<meta charset=utf-8>
</head>
<body>
    <canvas id="can1" width="500px" height="400px" style="border:1px solid red"/>
    <script type="text/javascript">
     //1、得到画布
     var canvas=document.getElementById("can1");
     //2、得到上下文引用，可以理解为画笔
     var cxt=canvas.getContext("2d");
     //3、画出直线
     cxt.moveTo(20,20);//起点
     cxt.lineTo(20,90);//设置第二个点位置
     cxt.stroke();//连线

     //画出一个填充的三角形-->路径
     cxt.beginPath();//开始新路径
     cxt.moveTo(40,20);
     cxt.lineTo(40,90);
     cxt.lineTo(70,90);
     cxt.closePath();//闭合路径，把最后一个点和第一个点进行闭合
   //cxt.fill();//闭合之后填充,填充举行
     cxt.stroke();//划线


     //画出矩形(对于矩形，可以不用路径)
     //若要改变填充颜色要使用fillStyle
     cxt.fillStyle="00ff00";
     cxt.fillRect(100,20,70,70);//填充矩形
     cxt.strokeRect(180,21,70,70);//画线矩形

     //画圆
     //六个参数，x、y、半径、其实角度、结束角度、顺时针or逆时针
     cxt.beginPath();
     cxt.arc(300,50,50,0,2*Math.PI);
     cxt.closePath();
   //cxt.stroke();//画线
     cxt.fill();//填充

      //画图（几个步骤）
      //1、创建image对象
      //2、置顶是那个图片
      var img1=new Image();
      img1.src="logo.jpg";
      img1.onload=function(){
          cxt.drawImage(img1,20,100,200,150);
      }

     var text="老婆我爱你";
     cxt.fillStyle="#0000FF";
     cxt.font="30px 华文彩云";
     cxt.fillText(text,230,200);
    </script>
   请说话： <input type="text" x-webkit-speech x-webkit-grammar="builtin:translate"/>

</body>
</html>

二、定位

html5可以调用google map、baidu　map等相关api进行定位

<!DOCTYPE html>  
<html>  
<body>  
<p id="demo">点击这个按钮，获得您的位置：</p>  
<button onclick="getLocation()">试一下</button>  
<div id="mapholder"></div>  
<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('mapholder')  
  mapholder.style.height='250px';  
  mapholder.style.width='500px';  
  
  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>

三、离线存储

1、用户可离线访问你的应用，这对于无法随时保持联网状态的移动终端用户来说尤其重要

2、用户访问本地的缓存文件，通常意味着更快的访问速度

3、仅仅加载被修改过的资源，避免同一资源对服务器多次的请求，大大降低了对服务器的访问压力

学习地址

四、媒体

html5支持视频播放

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

五、语音识别功能

http://www.zhangxinxu.com/wordpress/2012/05/html5-speech-x-webkit-grammar/