canvas入門 & HTML5 Web 儲存入門
HTML5是HTML最新的修訂版本，2014年10月由全球資訊網聯盟（W3C）完成標準制定。
HTML5的設計目的是為了在移動裝置上支援多媒體。
最基本的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>
canvas：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的瀏覽器不支援 HTML5 canvas 標籤。
</canvas>
<!canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,25);
</script>
</body>
</html>
======================
<!畫一條線：>
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
=========================
<!畫一個圓>
ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
=====================
<!寫幾個字>
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
========
漸變：
- createLinearGradient(x,y,x1,y1) - 建立線條漸變
- createRadialGradient(x,y,r,x1,y1,r1) - 建立一個徑向/圓漸變
// 建立漸變 var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 填充漸變 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
===============
// 建立漸變 var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 填充漸變 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
=================
HTML5 Web 儲存
localStorage 和 sessionStorage
客戶端儲存資料的兩個物件為：
- localStorage - 用於長久儲存整個網站的資料，儲存的資料沒有過期時間，直到手動去除。
- sessionStorage - 用於臨時儲存同一視窗(或標籤頁)的資料，在關閉視窗或標籤頁之後將會刪除這些資料。
在使用 web 儲存前,應檢查瀏覽器是否支援 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined") { // 是的! 支援 localStorage sessionStorage 物件! localStorage.sitename="菜鳥教程";
document.getElementById("result").innerHTML="網站名：" + localStorage.sitename; } else { // 抱歉! 不支援 web 儲存。 }
解析：
- 使用 key="sitename" 和 value="菜鳥教程" 建立一個 localStorage 鍵/值對。
- 檢索鍵值為"sitename" 的值然後將資料插入 id="result"的元素中。
移除 localStorage 中的 ""sitename" :
localStorage.removeItem(""sitename");
==========
Eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已經點選了按鈕 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="對不起，您的瀏覽器不支援 web 儲存。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">點我！</button></p>
<div id="result"></div>
<p>點選該按鈕檢視計數器的增加。</p>
<p>關閉瀏覽器選項卡(或視窗),重新開啟此頁面,計數器將繼續計數(不是重置)。</p>
</body>
</html>
======
localStorage與 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
- 儲存資料：localStorage.setItem(key,value);
- 讀取資料：localStorage.getItem(key);
- 刪除單個數據：localStorage.removeItem(key);
- 刪除所有資料：localStorage.clear();
- 得到某個索引的key：localStorage.key(index);