JavaScript中html畫布的使用與頁面儲存技術詳解
目錄
- 一、使用html中的畫布
- 二、頁面儲存技術
一、Script使用html中的畫布
1、畫布：頁面中用於繪製圖形的特殊區域
2、繪製圖形的過程
(1)建立畫布：使用html5中畫布標籤
<canvas id="id" width="寬度" height="高度"> </canvas>
(2)JavaScriptTGLxx中獲取畫布
document.getElementById('id')
(3)準備畫筆：context物件(畫筆)，也稱為繪製環境，使用該物件在畫布中繪製圖形
getContext('2d')
3、繪圖
(1)繪製線條：
A、初始位置、連線端點(終點)、描邊(畫線)
C、畫線過程：
a、確定初始位置(起始點)：moveTo(x,y)
b、確定連線端點(終點)：lineTo(x,y)
c、描邊：stroke()
D、線條的樣式
a、線寬：lineWidth =‘數值',預設以畫素為單位
b、描邊的顏色(線條顏色): strokeStyle = ‘顏色名或16進位制顏色值'
c、端點的形狀：lineCap = ‘形狀'
- butt：預設值，無端點形狀，顯示的是直線的方形邊緣
- round：圓形端點
- square：方形端點
E、線的路徑：在同一個畫布中新增再多的連線端點路徑只有一條
b、閉合路徑：closePath()
c、路徑填充：fill()
示例
ontext.strokeStyle = 'red' //描邊的顏色
context.moveTo(10,10); //起始位置
context.lineTo(10,100);//連線端點(豎線)
context.lTGLxxineTo(100,100);//連線端點(橫線)
context.closePath();//閉合路徑
context.stroke();//描邊
context.fill(); //填充
(2)繪製圓：arc(x,y,r,開始角,結束角,方向)
x,y ：圓心的座標 r：圓的半徑
開始角：可以圓周率
方向：繪圖方向(順時針、逆時針)，true表示逆時針，false表示順時針(預設)
示例
var canvas = document.getElementById('cavs');
var context = canvas.getContext('2d');
context.arc(150,80,50,2.0*Math.PI)
context.stroke()
二、頁面儲存技術
會話跟蹤技術,http協議是一個無狀態協議,伺服器端要確定傳送請求的客戶端必須使用會話跟蹤技術
1、原始的儲存方式（會話跟蹤技術）：通過Cookie方式儲存
(1)由伺服器端產生，儲存在客戶端的瀏覽器緩衝區中
(2)Cookie方式的缺點
A、Cookie被附加在HTTP訊息中，無形中增加了資料流量。
B、Cookie在HTTP訊息中是明文傳輸的，所以安全性不高，容易被竊取。
C、Cookie儲存於瀏覽器，可以被篡改，伺服器接收後必須先驗證資料的合法性。
D、瀏覽器限制Cookie的數量和大小（通常限制為50個，每個不超過4KB），對於複雜的儲存需求來說是不夠用的
2、Html5的頁面儲存方式(web storage)
(1)localStorage：持久化的本地儲存。以鍵-值(key-value)方式進行儲存，若使用者或程式不清除,則會 一直儲存在本地計算機上
(2)sessionStorage：
A、session：會話。在web開發中，一次會話是指從瀏覽器開啟到關閉;當瀏覽器關閉時會話就結束
B、sessionStorage：資料儲存在瀏覽器的記憶體中,當瀏覽器關閉時記憶體中的資料會自動清除。其生命週期和會話的生命週期相同
(3)localStorage和sessionStorage的區別
A、生命週期不同：localStorage是永久性的,sessionStorage的生命週期和會話相同,會話結束資料消失
B、儲存位置不同：localStorage儲存在硬碟上,sessionStorage儲存在瀏覽器記憶體中(瀏覽器快取中)
示例：使用畫布繪製火柴人
<body>
<canvas id="cas" width="1000" height="1000"></canvas>
</body>
</html>
<script>
var cas=document.getElementById('cas');
var context=cas.getContext('2d');
//繪製頭部
context.arc(400,100,30,2*Math.PI);
context.lineWidth='5';
context.stroke();
//繪製軀幹
context.beginPath();
context.moveTo(400,130);
context.lineTo(400,140);
context.lineWidth='5';
context.stroke();
context.beginPath();
context.moveTo(400,140);
context.lineTo(400,260);
context.lineWidth='25';
context.stroke();
//繪製資料夾
context.beginPath();
context.moveTo(360,200);
context.lineTo(440,200);
conthttp://www.cppcns.comext.lineTo(440,250);
context.lineTo(360,250);
context.closePath();
context.fillStyle='#fff';
context.fill();
context.lineWidth='2';
context.stroke();
//繪製手臂
context.beginPath();
context.moveTo(400,140);
context.lineTo(440,200);
context.lineTo(400,240);
context.lineWidth='10';
context.stroke();
context.beginPath();
context.arc(400,240,10,2*Math.PI);
context.fillStyle='#000';
context.fill();
//繪製腿部
context.beginPath();
context.moveTo(380,400);
context.lineTo(400,260);
context.lineTo(420,240);
context.lineWidth='10';
context.stroke();
context.beginPath();
context.arc(365,400,15,1*Math.PI,true);
context.closePath();
context.lineWidth='5';
context.stroke();
context.beginPath();
context.arc(405,true);
context.closePath();
context.lineWidth='5';
context.stroke();
</script>
效果如圖：可以通過修改引數來畫出自己喜歡的各種形狀
到此這篇關於JavaScript中html畫布的使用與頁面儲存技術的文章就介紹到這了,更多相關 html畫布內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！