会员投稿
投稿指南 
RSS订阅栏目导航
热点推荐
- HTTP状态代码合集
- HTML组件(HTML COMPONENTS)之九
- HTML组件(HTML COMPONENTS)之八
- HTML组件(HTML COMPONENTS)之五
- HTML组件(HTML COMPONENTS)之四
- 第12课：Web标准及验证
- 第11课：页面布局（CSS）
- 第10课：表格的高级特性
阅览排行
HTML5 从基础学习之二 --Canvas Geolocation Cache
www.jz123.cn 2012-09-12 来源: 站长家园 责任编辑(袁袁) 我要投递新闻
HTML5 的canvas元素使用JavaScript在网页上绘制图像
其拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法。
1、Canvas元素的创建（规定元素的id，宽度和高度）
<canvas id="myCanvas" width="200" height="100"></canvas>
2、JavaScript绘制：
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#ff0000";
cxt.fillRect(0,0,150,75);
</sctipt>
这段代码必须要写在<body>标签中才可以。
通过document来获取对象Canvas
通过Canvas.getContext（）获取上下文cxt是内建的HTML5对象，拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法
cxt.fillStyle="#ff0000";//设置填充颜色 RGB
cxt.fillRect(0,0,150,75);//设置填充区域 左上右下（0，0） 用于描绘一个已知左上角顶点位置以及宽和高的矩形，描绘完成后Context的绘制起点会移动到该矩形的左上角顶点。参数表示矩形左上角顶点的x、y坐标以及矩形的宽和高。
使用<canvas>标记，大多数Canvas绘图API都没有定义在<canvas>元素身上，而是定义在功过Canvas的getContext方法获得的一个"绘图环境”对象上。
CanvasAPI也使用了路径的表示法，但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用beginPath和arc（）方法。
一旦定义了路径其他方法，比如fill（）都对此路径操作，绘图环境的各种属性，比如fillStyle，说明了这些操作如何使用。
注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas> 图形，必须要么自己绘制它再用位图图像合并它，或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。
Canvas画线：
cxt.moveTo( x, y);//移动到要画线的位置 默认状态下，第一条路径的起点是画布的(0, 0)点，之后的起点是上一条路径的终点。两个参数分为表示起点的x、y坐标值。
cxt.lineTo(int x,int y);//从当前的位置画线到x,y坐标位置 用于描绘一条从起点从指定位置的直线路径，描绘完成后绘制的起点会移动到该指定位置。参数表示指定位置的x、y坐标值。
cxt.stroke();//依路径绘制线条 另：cxt.fillRect(int x,int y,int x,int y)依路径来填充图形
Canvas画圆：
cxt.fillStyle="#ff0000";
cxt.beginPath();//开始路径
cxt.arc( x,y,radius,startAngle,endAngle,anticlockwise);//如：cxt.arc(70,18,15,0,Math.PI*2,true); 用于描绘一个以(x, y)点为圆心，radius为半径，startAngle为起始弧度，endAngle为终止弧度的圆弧。anticlockwise为布尔型的参数，true表示逆时针，false表示顺时针。参数中的两个弧度以0表示0°，位置在3点钟方向；Math.PI值表示180°，位置在9点钟方向。如果Mathi。PI*2的画，就是360°，也就是一个圆。
cxt.closePath();//你懂的。。
cxt.fill();//用于使用当前的填充风格来填充路径的区域。
Canvas绘制渐变背景：
var grd =cxt.createLinearGradient(0,0,175,50);//创建线性渐变 后面的参数是位置：左上右下。它在指定的起始点和结束点之间线性地内插颜色值。还可以创建放射性渐变createRadialGradient（xstart,ystart,radiusStart,xend,yend,radiusEnd）; xstart,ystart开始圆的圆心坐标，radiusStart开始圆的直径，xend,yend结束圆心的坐标。radiusEnd结束圆的直径。该对象在两个指定圆的圆周之间放射性地插值颜色。
注意，这个方法并没有指定任何用来渐变的颜色。使用返回对象的 addColorStop() 方法做到这一点。要使用一个渐变来勾勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。
grd.addColorStop(0,"#ff0000");//addColorStop(offset,color)在渐变中的某一点添加一个颜色渐变。offset这个值在0.0到1.0之间浮动，表示渐变的开始点和结束点之间的一部分0为开始点，1代表结束点。color已css颜色字符串的方式，表示在指定offset显示的颜色。该方法可以调用一次或多次来改变渐变的开始点和结束点之间的特定百分段的颜色。
grd.addColorStop(1,"#ff0000");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
Canvas画图像：
var img = new Image();
img.src="/i/flower.png";//只要是 Gecko 支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。图像的引入还有一种方法：
var img = new Image();、、新建一个图像对象
img.onload = function(){//exectute drawImage statements here};
img.src = 'myImage.png';//设置资源路径
cxt.drawImage(img,0,0);// image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标
另外
lineJoin
线条的转折处样式，有round（圆角）、bevel（平角）、miter（尖角）三种；类型可供选择，默认为miter。
参考资料：https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial/Using_images应用图像
http://www.webreference.com/programming/javascript/gr/column3/index.html图片预装载
HTML SVG学习：
SVG指可伸缩矢量图形（Scalable Vector Graphics），使用xml格式定义图形，图像在改变尺寸的情况下，质量不会有损失。
目前，Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
HTML5 Geolocation（地理位置定位）定位用户的位置
该功能可能侵犯用户隐私，除非用户同意，否则用户位置信息是不可用的
浏览器支持：
Internet Explorer 9、Firefox、Chrome、Safari以及 Opera 支持地理定位。
注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。
可以使用getCurrentPosition（）方法来获得用户的位置
eg：获取用户的经度和纬度：
直接在script中使用
1、先判断是否支持位置服务：
navigation.geolocation
2、获得当前位置：如果支持则执行一下方法
navigation.geolocation.getCurrentPosition(showPosition);//如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
3、获得经纬度：
function showPosition(position){
position.coords.latitude;//可以直接在界面上展示
position.coords.longitude;
}
4,对位置服务获取错误的处理：
navigator.geolocation.getCurrentPosition(showPosition,showError);//在这里将错误处理的函数放入
错误处理函数如下：
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;
}
}
在地图中显示结果：
如果要在地图中显示结果的话，需要访问可使用经纬度的地图服务，比如谷歌地图或者百度地图：
对上面代码的更改也就是对showPositon函数少做处理：
function showPosition(positon){
var latlon = position.coords.latitude+","position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'/>";
}
还可以这样写：
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!"});
}
关于getCurrentPosition方法返回的数据：
如果成功，始终会返回的数据：
latitude，longitude，accuracy
如果可用则返回的数据可能是下面的这些：
coords.latitude//纬度
coords.longitude//经度
coords.accuracy//位置精度
coords.altitude//海拔
coords.altitudeAccuracy位置的海拔精度
coords.heading方向，从正北开始
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间
关于Geolocation对象
Geolocation对象还有一个方法，可以返回用户移动时的更新位置（GPS功效）
它就是watchPosition();
clearWatch()方法可以停止watchPosition方法。
使用方法如下：
if(navigator.geolocation){
navigator.geolocation.watchposition(showPosition);
}
showPosition函数就可以跟上面的一样，你可以用地图显示也可以直接显示坐标位置。】
注：位置服务用于估计您所在位置的本地网络信息包括：有关可见 WiFi 接入点的信息（包括信号强度）、有关您本地路由器的信息、您计算机的 IP 地址。位置服务的准确度和覆盖范围因位置不同而异。
HTML5 在客户端存储数据：
HTML5提供了两种在客户端存储数据的方法：
1、localStorage--没有时间限制的数据存储
2、sessionStorage-针对一个session的数据存储
使用JavaScript来存储和访问数据。
创建和访问localStorage：
<script type="text/javascript">
localStorage.lastname="Xiao";
document.write(localStorage.lastname);
</script>
sessionStorage方法
sessionStorage方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个 sessionStorage：
<script type="text/javascript">
sessionStorage.lastname="Xiao";
document.write(sessionStorage.lastname);
</script>
应用程序缓存Application Cache
HTML5 引入了应用程序缓存，web应用可进行缓存，并可在没有因特网的连接时进行访问。目前除了IE其他浏览器都支持应用程序缓存
有缓存HTML文档这样写：
<!DOCTYPE HTML>
<html manifest="/i/demo.appcache">
<body>
The content of the document...
</body>
</html>
manifest文件的建议的文件扩展名是：“.appcache”
manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
demo.appcache文件这样写：
CACHE MANIFEST//要缓存的内容
/theme.css
/logo.gif
/main.js
NETWORK://不进行缓存的内容
*
FALLBACK://如果无法建立因特网连接，则使用offlin.html替代/html5/下面的所以文件
/html5/ /404.html
上一篇：HTML 5 从基础开始学习之一 video audio 拖动 下一篇：HTML5 学习之三 web worker,server-send,表单属性