HTML5 提供了兩種新物件 可在客戶端儲存
資料
1. localStorage - 無時間限制的儲存資料
2. sessionStorage - 將資料儲存於 Session
早期這些動作是利用 Cookies 來達成，但 Cookies 不適用於大量的資料，因為每次的 Request 都會將 Cookies 送出，要是儲存於 Cookies 的資料量很大，則會導致執行效能變得非常慢。
HTML5 中， 這些資料不需要於每次的 Request 都隨著送出，只有被要求時才會使用，達到可儲存大量資料亦不會拖垮效能的效果。
不同網站的資料儲存於不同的位置，而各網站只能存取自己儲存的資料。
HTML5 使用 Javascript 來儲存及存取這些資料。
以下為 localStorage 使用範例(無時間限制)
<script type="text/javascript">
// 建立 localStorage 的 lastname 屬性並指定值
localStorage.lastname="Smith";
// 輸出 localStorage 的 lastname 屬性所儲存的值
document.write(localStorage.lastname);
</script>
以下範例為到訪網頁的計次功能
<script type="text/javascript">
// 若 localStorage 的 pagecount 屬性存在則直接加 1, 不存在則指定 1
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
// 輸出到訪次數
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
以下為 sessionStorage 使用範例(使用者關閉瀏覽器時其值會被清空)
<script type="text/javascript">
// 建立 sessionStorage 的 lastname 屬性並指定值
sessionStorage.lastname="Smith";
// 輸出 sessionStorage 的 lastname 屬性所儲存的值
document.write(sessionStorage.lastname);
</script>
以下範例為到訪網頁的計次功能
<script type="text/javascript">
// 若 sessionStorage 的 pagecount 屬性存在則直接加 1, 不存在則指定 1
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
// 輸出到訪次數
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
流風羽 發表在 痞客邦 留言(0) 人氣(253)
以下為 HTML5 Canvas 繪製影像
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
window.onload=function()
{
// 取得 Canvas 元素
var c=document.getElementById("myCanvas");
// 建立繪製物件
var ctx=c.getContext("2d");
// 建立影像物件
var img=new Image();
// 指定影像來源
img.src="img_flwr.png";
// 繪製影像 參數依序為 影像物件, x, y
ctx.drawImage(img,0,0);
}
</script>
</body>
</html>
流風羽 發表在 痞客邦 留言(0) 人氣(282)
以下為 HTML5 Canvas 繪製線型漸層範例
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
// 取得 Canvas 元素
var c=document.getElementById("myCanvas");
// 建立繪製物件
var ctx=c.getContext("2d");
// 建立線型漸層物件 參數依序為 x0(x起始點)、y0(y起始點)、x1(x結束點)、y1(y結束點)
var grd=ctx.createLinearGradient(0,0,175,50);
// 設定顏色位置 參數依序為 position(0.0 到 1.0，0 即為起始點，1 即為結束點)、顏色代碼
grd.addColorStop(0,"#FF0000");
// 設定顏色位置 參數依序為 position(0.0 到 1.0，0 即為起始點，1 即為結束點)、顏色代碼
grd.addColorStop(1,"#00FF00");
// 設定填滿樣式
ctx.fillStyle=grd;
// 執行填滿繪製 參數依序為 x、y、width(寬)、height(高)
ctx.fillRect(0,0,175,50);
</script>
</body>
</html>
流風羽 發表在 痞客邦 留言(0) 人氣(1,840)
以下為 HTML5 Canvas 繪製圓形範例
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
// 取得 Canvas 元素
var c=document.getElementById("myCanvas");
// 建立繪製物件
var ctx=c.getContext("2d");
// 設定顏色
ctx.fillStyle="#FF0000";
// 清空現行路徑，開始新路徑。
ctx.beginPath();
// 繪製圓形 參數依序為 x、y、半徑r、起始角度、結束角度、順時針繪製
ctx.arc(70, 18, 15, 0, Math.PI * 2, true);
// 封閉路徑
ctx.closePath();
// 執行繪製(填滿)
ctx.fill();
</script>
</body>
</html>
流風羽 發表在 痞客邦 留言(1) 人氣(2,697)
以下為 HTML5 Canvas 繪製線段範例
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
// 取得 Canvas 元素
var c=document.getElementById("myCanvas");
// 建立繪製物件
var ctx=c.getContext("2d");
// 將繪製點移至 10, 10
ctx.moveTo(10,10);
// 自 10, 10 繪製一條直線至 150, 150
ctx.lineTo(150,50);
// 自 150, 150 繪製一條直線至 10, 50
ctx.lineTo(10,50);
// 執行繪製
ctx.stroke();
</script>
</body>
</html>
結果如下
流風羽 發表在 痞客邦 留言(0) 人氣(194)
HTML5 Canvas 是用於繪製圖形於網頁上
必須使用 Javascript 來繪製
一個 Canvas 即為一個矩形區域，你可以控制它的每一個像素(Pixel)。
Canvas 提供了幾種方法來繪製各種圖形，或是增加圖片。
以下為 Canvas 宣告方式 指定 id、width、height
<canvas id="myCanvas" width="200" height="100"></canvas>
Canvas 並無屬性可以用來繪製，所有的動作必須使用 Javascript 來操作，以下範例。
<script type="text/javascript">
// 取得 Canvas 元素
var c=document.getElementById("myCanvas");
// 建立繪製物件
var ctx=c.getContext("2d");
// 設定顏色
ctx.fillStyle="#FF0000";
// 設定範圍 參數分別為 shape, position, size
ctx.fillRect(0,0,150,75);
</script>
結果如下圖
流風羽 發表在 痞客邦 留言(0) 人氣(107)
目前 HTML5 audio 支援三種檔案格式
1. MP3
2. Wav
3. Ogg
針對個別瀏覽器的支援如下表
| Browser | MP3 | Wav | Ogg |
|---|
Internet Explorer 9 |
YES |
NO |
NO |
Firefox 4.0 |
NO |
YES |
YES |
Google Chrome 6 |
YES |
YES |
YES |
Apple Safari 5 |
YES |
YES |
NO |
Opera 10.6 |
NO |
YES |
YES |
Tags
Example
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
流風羽 發表在 痞客邦 留言(0) 人氣(157)
以下為 HTML5
Video範例
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br />
<video id="video1">
<source src="mov_bbb.mp4" type="video/mp4" />
<source src="mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
// 撥放/暫停
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
// 放大
function makeBig()
{
myVideo.height=(myVideo.videoHeight*2);
}
// 縮小
function makeSmall()
{
myVideo.height=(myVideo.videoHeight/2);
}
// 還原
function makeNormal()
{
myVideo.height=(myVideo.videoHeight);
}
</script>
</body>
</html>
流風羽 發表在 痞客邦 留言(0) 人氣(266)
目前 HTML5
video支援三種檔案格式
1. MP4
2. WebM
3. Ogg
針對個別瀏覽器的支援如下表
| Browser | MP4 | WebM | Ogg |
|---|
Internet Explorer 9 |
YES |
NO |
NO |
Firefox 4.0 |
NO |
YES |
YES |
Google Chrome 6 |
YES |
YES |
YES |
Apple Safari 5 |
YES |
NO |
NO |
Opera 10.6 |
NO |
YES |
YES |
MP4 - 影像以 H264 編碼，音效以 ACC 編碼。
WebM - 影像以 VP8編碼，音效以 Vorbis 編碼。
Ogg - 影像以 Theora 編碼，音效以 Vorbis 編碼。
Tags
Example
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
流風羽 發表在 痞客邦 留言(0) 人氣(137)
Technology (30)