快捷導(dǎo)航

JavaScript中html畫布的使用與頁(yè)面存儲(chǔ)技術(shù)詳解

更新時(shí)間：2021年08月12日 11:08:34 作者：暮白寒窗雪

這篇文章主要介紹了JavaScript中html畫布的使用與頁(yè)面存儲(chǔ)技術(shù),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、JavaScript使用html中的畫布

1、畫布：頁(yè)面中用于繪制圖形的特殊區(qū)域
2、繪制圖形的過程
(1)創(chuàng)建畫布：使用html5中畫布標(biāo)簽

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

(2)JavaScript中獲取畫布

document.getElementById('id')

(3)準(zhǔn)備畫筆：context對(duì)象(畫筆)，也稱為繪制環(huán)境，使用該對(duì)象在畫布中繪制圖形

 getContext('2d')

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

butt：默認(rèn)值，無端點(diǎn)形狀，顯示的是直線的方形邊緣
round：圓形端點(diǎn)
square：方形端點(diǎn)

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

ontext.strokeStyle = 'red' //描邊的顏色
context.moveTo(10,10); //起始位置
context.lineTo(10,100);//連線端點(diǎn)(豎線)
context.lineTo(100,100);//連線端點(diǎn)(橫線)
context.closePath();//閉合路徑
context.stroke();//描邊
context.fill(); //填充

(2)繪制圓：arc(x,y,r,開始角,結(jié)束角,方向)
x,y ：圓心的坐標(biāo) r：圓的半徑
開始角：可以圓周率
結(jié)束角：同開始角相同
方向：繪圖方向(順時(shí)針、逆時(shí)針)，true表示逆時(shí)針，false表示順時(shí)針(默認(rèn))
示例

var canvas = document.getElementById('cavs');
var context = canvas.getContext('2d');
context.arc(150,80,50,0,2.0*Math.PI)
context.stroke()

二、頁(yè)面存儲(chǔ)技術(shù)

會(huì)話跟蹤技術(shù),http協(xié)議是一個(gè)無狀態(tài)協(xié)議,服務(wù)器端要確定發(fā)送請(qǐng)求的客戶端必須使用會(huì)話跟蹤技術(shù)
1、原始的存儲(chǔ)方式（會(huì)話跟蹤技術(shù)）：通過Cookie方式存儲(chǔ)
(1)由服務(wù)器端產(chǎn)生，存儲(chǔ)在客戶端的瀏覽器緩沖區(qū)中
(2)Cookie方式的缺點(diǎn)
A、Cookie被附加在HTTP消息中，無形中增加了數(shù)據(jù)流量。
B、Cookie在HTTP消息中是明文傳輸?shù)模园踩圆桓?，容易被竊取。
C、Cookie存儲(chǔ)于瀏覽器，可以被篡改，服務(wù)器接收后必須先驗(yàn)證數(shù)據(jù)的合法性。
D、瀏覽器限制Cookie的數(shù)量和大?。ㄍǔＯ拗茷?0個(gè)，每個(gè)不超過4KB），對(duì)于復(fù)雜的存儲(chǔ)需求來說是不夠用的
2、Html5的頁(yè)面存儲(chǔ)方式(web storage)
(1)localStorage：持久化的本地存儲(chǔ)。以鍵-值(key-value)方式進(jìn)行存儲(chǔ)，若用戶或腳本程序不清除,則會(huì) 一直存儲(chǔ)在本地計(jì)算機(jī)上
(2)sessionStorage：
A、session：會(huì)話。在web開發(fā)中，一次會(huì)話是指從瀏覽器打開到關(guān)閉;當(dāng)瀏覽器關(guān)閉時(shí)會(huì)話就結(jié)束
B、sessionStorage：數(shù)據(jù)存儲(chǔ)在瀏覽器的內(nèi)存中,當(dāng)瀏覽器關(guān)閉時(shí)內(nèi)存中的數(shù)據(jù)會(huì)自動(dòng)清除。其生命周期和會(huì)話的生命周期相同
(3)localStorage和sessionStorage的區(qū)別
A、生命周期不同：localStorage是永久性的,sessionStorage的生命周期和會(huì)話相同,會(huì)話結(jié)束數(shù)據(jù)消失
B、存儲(chǔ)位置不同：localStorage存儲(chǔ)在硬盤上,sessionStorage存儲(chǔ)在瀏覽器內(nèi)存中(瀏覽器緩存中)

示例：使用畫布繪制火柴人

<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>

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

在這里插入圖片描述