JavaScript中html畫布的使用與頁(yè)面存儲(chǔ)技術(shù)詳解
1、畫布：頁(yè)面中用于繪制圖形的特殊區(qū)域2、繪制圖形的過程(1)創(chuàng)建畫布：使用html5中畫布標(biāo)簽
<canvas 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ù)量和大小（通常限制為50個(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 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ù)來畫出自己喜歡的各種形狀
到此這篇關(guān)于JavaScript中html畫布的使用與頁(yè)面存儲(chǔ)技術(shù)的文章就介紹到這了,更多相關(guān)js html畫布內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. React+umi+typeScript創(chuàng)建項(xiàng)目的過程2. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執(zhí)行過程解析3. SharePoint Server 2019新特性介紹4. ASP中常用的22個(gè)FSO文件操作函數(shù)整理5. 三個(gè)不常見的 HTML5 實(shí)用新特性簡(jiǎn)介6. ASP調(diào)用WebService轉(zhuǎn)化成JSON數(shù)據(jù)，附j(luò)son.min.asp7. .Net core 的熱插拔機(jī)制的深入探索及卸載問題求救指南8. 無線標(biāo)記語言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)9. 讀大數(shù)據(jù)量的XML文件的讀取問題10. 解決ASP中http狀態(tài)跳轉(zhuǎn)返回錯(cuò)誤頁(yè)的問題
網(wǎng)公網(wǎng)安備