HTML5 從基礎學習之二 --Canvas Geolocation Cache
HTML5 的canvas元素使用JavaScript在網頁上繪製圖像javascript
其擁有多種繪製路徑，矩形，圓形，字符以及添加圖像的方法。css
1、Canvas元素的建立（規定元素的id，寬度和高度）html
<canvas id="myCanvas" width="200" height="100"></canvas>html5
2、JavaScript繪製：java
<script type="text/javascript">git
var c = document.getElementById("myCanvas");web
var cxt=c.getContext("2d");canvas
cxt.fillStyle="#ff0000";api
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
- 1. HTML5 Geolocation學習
- 2. HTML5學習之Canvas基礎知識
- 3. Html5 Canvas 學習之路（二）
- 4. HTML5 canvas之基礎篇（一）
- 5. 前端學習總結（一）HTML5基礎
- 6. canvas基礎二
- 7. HTML5 Canvas學習之路（六）
- 8. Html5 Canvas學習之路（三）
- 9. [學習筆記]HTML5之canvas
- 10. Html5 Canvas學習之路（四）
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。