JavaScript中html畫布的使用與頁面存儲技術(shù)詳解
1、畫布：頁面中用于繪制圖形的特殊區(qū)域2、繪制圖形的過程(1)創(chuàng)建畫布：使用html5中畫布標簽
<canvas height='高度'></canvas>
(2)JavaScript中獲取畫布
document.getElementById(’id’)
(3)準備畫筆：context對象(畫筆)，也稱為繪制環(huán)境，使用該對象在畫布中繪制圖形
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 =‘數(shù)值’ ,默認以像素為單位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,開始角,結(jié)束角,方向)x,y ：圓心的坐標 r：圓的半徑開始角：可以圓周率 結(jié)束角：同開始角相同方向：繪圖方向(順時針、逆時針)，true表示逆時針，false表示順時針(默認)示例
var canvas = document.getElementById(’cavs’);var context = canvas.getContext(’2d’);context.arc(150,80,50,0,2.0*Math.PI)context.stroke()二、頁面存儲技術(shù)
會話跟蹤技術(shù),http協(xié)議是一個無狀態(tài)協(xié)議,服務(wù)器端要確定發(fā)送請求的客戶端必須使用會話跟蹤技術(shù)1、原始的存儲方式（會話跟蹤技術(shù)）：通過Cookie方式存儲(1)由服務(wù)器端產(chǎn)生，存儲在客戶端的瀏覽器緩沖區(qū)中(2)Cookie方式的缺點A、Cookie被附加在HTTP消息中，無形中增加了數(shù)據(jù)流量。B、Cookie在HTTP消息中是明文傳輸?shù)模园踩圆桓撸菀妆桓`取。C、Cookie存儲于瀏覽器，可以被篡改，服務(wù)器接收后必須先驗證數(shù)據(jù)的合法性。D、瀏覽器限制Cookie的數(shù)量和大小（通常限制為50個，每個不超過4KB），對于復(fù)雜的存儲需求來說是不夠用的2、Html5的頁面存儲方式(web storage)(1)localStorage：持久化的本地存儲。以鍵-值(key-value)方式進行存儲，若用戶或腳本程序不清除,則會 一直存儲在本地計算機上(2)sessionStorage：A、session：會話。在web開發(fā)中，一次會話是指從瀏覽器打開到關(guān)閉;當瀏覽器關(guān)閉時會話就結(jié)束 B、sessionStorage：數(shù)據(jù)存儲在瀏覽器的內(nèi)存中,當瀏覽器關(guān)閉時內(nèi)存中的數(shù)據(jù)會自動清除。其生命周期和會話的生命周期相同(3)localStorage和sessionStorage的區(qū)別A、生命周期不同：localStorage是永久性的,sessionStorage的生命周期和會話相同,會話結(jié)束數(shù)據(jù)消失B、存儲位置不同：localStorage存儲在硬盤上,sessionStorage存儲在瀏覽器內(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畫布的使用與頁面存儲技術(shù)的文章就介紹到這了,更多相關(guān)js html畫布內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
網(wǎng)公網(wǎng)安備