JavaScript中html畫布的使用與頁面存儲技術詳解
1、畫布：頁面中用于繪制圖形的特殊區域2、繪制圖形的過程(1)創建畫布：使用html5中畫布標簽
<canvas 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 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畫布內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備