JavaScript中html畫佈的使用與頁面存儲技術詳解

Posted on by

一、JavaScript使用html中的畫佈

1、畫佈：頁面中用於繪制圖形的特殊區域
2、繪制圖形的過程
(1)創建畫佈：使用html5中畫佈標簽

<canvas id="id" width="寬度" height="高度">
</canvas>

(2)JavaScript中獲取畫佈

document.getElementById('id')

(3)準備畫筆：context對象(畫筆)，也稱為繪制環境，使用該對象在畫佈中繪制圖形

 getContext('2d')

3、繪圖
(1)繪制線條：
A、初始位置、連線端點(終點)、描邊(畫線)
B、2d平面坐標系：畫佈的左上角是坐標原點(0,0),從原點開始向右延伸是x軸增大,向下延伸是y軸增大
C、畫線過程：
a、確定初始位置(起始點)：moveTo(x,y)
b、確定連接端點(終點)：lineTo(x,y)
c、描邊：stroke()
D、線條的樣式
a、線寬：lineWidth =‘數值’ ,默認以像素為單位
b、描邊的顏色(線條顏色): strokeStyle = ‘顏色名或16進制顏色值’
c、端點的形狀：lineCap = ‘形狀’

  • butt：默認值，無端點形狀，顯示的是直線的方形邊緣
  • round：圓形端點
  • square：方形端點

E、線的路徑：在同一個畫佈中添加再多的連線端點路徑隻有一條
a、開始新的路徑：beginPath()
b、閉合路徑：closePath()
c、路徑填充：fill()
示例

ontext.strokeStyle = 'red' //描邊的顏色
context.moveTo(10,10); //起始位置
context.lineTo(10,100);//連線端點(豎線)
context.lineTo(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,0,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,0,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);
	context.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,0,2*Math.PI);
	context.fillStyle='#000';
	context.fill();
	//繪制腿部
	context.beginPath();
	context.moveTo(380,400);
	context.lineTo(400,260);
	context.lineTo(420,400);
	context.lineTo(400,240);
	context.lineWidth='10';
	context.stroke();	
	context.beginPath();
	context.arc(365,400,15,0,1*Math.PI,true);
	context.closePath();
	context.lineWidth='5';
	context.stroke();
	context.beginPath();
	context.arc(405,400,15,0,1*Math.PI,true);
	context.closePath();
	context.lineWidth='5';
	context.stroke();
</script>

效果如圖：可以通過修改參數來畫出自己喜歡的各種形狀

在這裡插入圖片描述

到此這篇關於JavaScript中html畫佈的使用與頁面存儲技術的文章就介紹到這瞭,更多相關js html畫佈內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：