HTML5 CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）課件 第11章 繪圖和數(shù)據(jù)存儲(chǔ)

第11章繪圖和數(shù)據(jù)存儲(chǔ)《HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）》學(xué)習(xí)目標(biāo)/Target

了解畫布的概念，能夠闡述網(wǎng)頁(yè)中畫布的作用

熟悉變量的相關(guān)知識(shí)，能夠在JavaScript中定義變量

掌握J(rèn)avaScript文件的引入方法，能夠在網(wǎng)頁(yè)中引入JavaScript文件

掌握document對(duì)象的用法，能夠使用document對(duì)象獲取標(biāo)簽屬性

掌握畫布的使用方法，能夠在網(wǎng)頁(yè)中添加畫布學(xué)習(xí)目標(biāo)/Target

掌握填充圖形的方法，能夠?yàn)閳D形填充顏色

掌握線樣式的設(shè)置方法，能夠設(shè)置不同寬度、顏色和端點(diǎn)形狀的線。掌握線的繪制方法，能夠在畫布中繪制線

掌握線路徑的操作方法，能夠在畫布中進(jìn)行重置路徑和閉合路徑的操作

掌握繪制圓的方法，能夠在畫布中繪制圓章節(jié)概述/SummaryHTML5提供了新的繪圖功能和數(shù)據(jù)存儲(chǔ)技術(shù)。繪圖功能允許用戶使用JavaScript繪制圖形、制作動(dòng)畫，使網(wǎng)頁(yè)具有交互性和動(dòng)態(tài)性。數(shù)據(jù)存儲(chǔ)技術(shù)可以減少網(wǎng)頁(yè)對(duì)服務(wù)器的依賴，提高網(wǎng)頁(yè)的加載速度和性能。本章將對(duì)HTML5中的繪圖功能和數(shù)據(jù)存儲(chǔ)技術(shù)進(jìn)行簡(jiǎn)單的介紹。目錄/Contents010203JavaScript基礎(chǔ)內(nèi)容HTML5畫布HTML5數(shù)據(jù)存儲(chǔ)基礎(chǔ)04階段案例——繪制火柴人JavaScript基礎(chǔ)內(nèi)容11.111.1JavaScript基礎(chǔ)內(nèi)容什么是JavaScript？11.1JavaScript基礎(chǔ)內(nèi)容說(shuō)起JavaScript其實(shí)大家并不陌生，我們平時(shí)瀏覽的網(wǎng)頁(yè)中經(jīng)常用到JavaScript。11.1.1JavaScript的引入行內(nèi)式行內(nèi)式是將JavaScript代碼寫在HTML標(biāo)簽的屬性中。例如:單擊“測(cè)試”文本時(shí)，彈出一個(gè)警告框提示“測(cè)試成功”。<ahref="#"onclick="alert('測(cè)試成功')">測(cè)試</a>單擊“測(cè)試”11.1.1JavaScript的引入內(nèi)部式內(nèi)部式是將JavaScript代碼寫在HTML的<script>標(biāo)簽中。基本語(yǔ)法格式<script>JavaScript代碼</script><script>標(biāo)簽內(nèi)的代碼為JavaScript代碼。<script>標(biāo)簽還有一個(gè)type屬性，用來(lái)指定HTML中使用的腳本語(yǔ)言類型。type="text/javascript"表示<script>標(biāo)簽內(nèi)的文本為JavaScript代碼。在HTML5中，該屬性可以省略。11.1.1JavaScript的引入外部式外部式是指將所有JavaScript代碼放在一個(gè)或多個(gè)以“.js”為擴(kuò)展名的外部JavaScript文件中，并通過(guò)<script>標(biāo)簽的src屬性將這些JavaScript文件引入HTML文檔。基本語(yǔ)法格式<scriptsrc="JavaScript文件路徑"></script>src是<script>標(biāo)簽的屬性，用于設(shè)置外部JavaScript文件的路徑。11.1.1JavaScript的引入外鏈?zhǔn)降膬?yōu)勢(shì)（1）利于后期修改和維護(hù)（2）減少文件體積，提升頁(yè)面的加載速度11.1.2變量什么是變量？11.1.2變量在計(jì)算機(jī)編程中，如果需要多次使用同一個(gè)數(shù)據(jù)，可以使用變量來(lái)保存這個(gè)數(shù)據(jù)。變量是程序中被命名的存儲(chǔ)容器，它提供了存放數(shù)據(jù)的空間，提高了代碼的執(zhí)行效率和重用性。11.1.2變量變量的命名必須以字母或下劃線開頭，中間可以是數(shù)字、字母或下劃線。變量名不能包含空格、加、減等符號(hào)。不能使用JavaScript中的關(guān)鍵字。JavaScript的變量名嚴(yán)格區(qū)分大小寫，UserName與username是兩個(gè)不同的變量名。123411.1.2變量

思考

如何聲明變量？在JavaScript中使用var關(guān)鍵字聲明變量，這種直接使用var聲明變量的方法稱為顯式聲明。聲明變量語(yǔ)法格式var變量名;varsales;varhits,hot,NEWS;varroom_101,room102;var$name,$age;示例代碼：11.1.2變量我們可以在聲明變量的同時(shí)為變量賦值，也可以在聲明完成之后再為變量賦值。varunit,room; //聲明變量varunit=3; //為變量賦值varroom=1001; //為變量賦值varfname='Tom',age=12;

//聲明變量的同時(shí)賦值例如：聲明變量時(shí)，也可以省略var關(guān)鍵字，直接通過(guò)賦值的方式聲明變量，這種方式稱為隱式聲明。flag=false; //聲明變量flag并為其賦值falsea=1,b=2; //聲明變量a和b并分別賦值為1和211.1.3document對(duì)象什么是document？11.1.3document對(duì)象如果想在JavaScript中操作某個(gè)HTML標(biāo)簽，首先需要獲取該標(biāo)簽的元素對(duì)象。在JavaScript中可以使用document對(duì)象及其提供的方法獲取HTML標(biāo)簽，例如可以通過(guò)id屬性、name屬性、標(biāo)簽名、類名等查找元素。11.1.3document對(duì)象方法說(shuō)明document.getElementById()返回?fù)碛兄付╥d的第一個(gè)對(duì)象document.getElementsByName()返回帶有指定name屬性的對(duì)象集合document.getElementsByTagName()返回帶有指定標(biāo)簽名的對(duì)象集合document.getElementsByClassName()返回帶有指定類名的對(duì)象集合document對(duì)象的方法及說(shuō)明“document.”后面的內(nèi)容用于訪問(wèn)對(duì)象的屬性或方法，是JavaScript中的一種常用寫法。HTML5畫布11.211.2.1認(rèn)識(shí)畫布

說(shuō)到畫布，其實(shí)大家并不陌生，在美術(shù)課上，我們可以用畫筆在畫布上繪畫。在網(wǎng)頁(yè)中，我們把用于繪制圖形的特殊區(qū)域也稱為“畫布”，網(wǎng)頁(yè)設(shè)計(jì)師可以在該區(qū)域繪制需要的圖形樣式。11.2.1認(rèn)識(shí)畫布

默認(rèn)情況下，網(wǎng)頁(yè)中的畫布是一個(gè)寬度為300px、高度為150px的方形區(qū)域，用戶可以自定義畫布的大小或添加其他屬性。然而，在HTML5中，在畫布上繪畫并不使用鼠標(biāo)，而是需要通過(guò)JavaScript進(jìn)行控制。通過(guò)JavaScript，用戶可以向畫布中添加圖片、線條、文字等內(nèi)容。11.2.2使用畫布

使用HTML5中的<canvas>標(biāo)簽可以在網(wǎng)頁(yè)中創(chuàng)建畫布。1.創(chuàng)建畫布基本語(yǔ)法格式<canvasid="畫布名稱"width="畫布寬度"height="畫布高度">

您的瀏覽器不支持畫布</canvas><canvas>標(biāo)簽用于定義畫布，id屬性用于在JavaScript代碼中引用畫布。<canvas>標(biāo)簽是一個(gè)雙標(biāo)簽，用戶可以在中間輸入文字，當(dāng)瀏覽器不支持<canvas>標(biāo)簽時(shí)，就會(huì)顯示對(duì)應(yīng)的文字信息。畫布有width和height兩個(gè)屬性，分別用于定義畫布的寬度和高度，取值可以為數(shù)字或像素值。11.2.2使用畫布

使用getElementById()方法可以獲取網(wǎng)頁(yè)中的畫布對(duì)象。2.獲取畫布示例代碼varcanvas=document.getElementById('cavs');11.2.2使用畫布

有了畫布之后，在開始繪圖之前，還需要準(zhǔn)備一支“畫筆”。我們可以使用getContext()方法獲取畫筆。3.準(zhǔn)備畫筆示例代碼varcontext=canvas.getContext('2d');11.2.3繪制線

繪制線的基本步驟為定義初始位置、定義連線端點(diǎn)以及描邊。11.2.3繪制線

在繪制圖形時(shí)，首先需要確定從哪里下“筆”，這個(gè)下“筆”的位置就是初始位置。1.定義初始位置在平面中，初始位置可以使用“x,y”形式的坐標(biāo)表示，從左上角“0,0”開始，x軸上的值向右增大，y軸上的值向下增大。11.2.3繪制線

在繪制圖形時(shí)，首先需要確定從哪里下“筆”，這個(gè)下“筆”的位置就是初始位置。1.定義初始位置varcas=document.getElementById('cas');varcontext=cas.getContext('2d');context.moveTo(100,100);例如：在畫布中使用moveTo(x,y)方法定義初始位置，其中x和y分別代表水平坐標(biāo)和垂直坐標(biāo)，中間用英文逗號(hào)隔開。11.2.3繪制線

定義連線端點(diǎn)時(shí)，將定義一個(gè)端點(diǎn)，并繪制一條從該端點(diǎn)到初始位置的連線。在畫布中使用lineTo(x,y)方法定義連線端點(diǎn)。2.定義連接端點(diǎn)示例代碼context.lineTo(100,100);11.2.3繪制線

通過(guò)初始位置和連線端點(diǎn)可以繪制一條線，但這條線是不可見的。我們需要為這條線添加描邊，讓其變得可見。使用畫布中的stroke()方法可以實(shí)現(xiàn)線的可視效果。3.描邊示例代碼context.stroke();11.2.4線的樣式

使用畫布中的lineWidth屬性可以設(shè)置線的寬度，該屬性的取值為數(shù)值。1.寬度示例代碼context.lineWidth='10';11.2.4線的樣式

使用畫布中的strokeStyle屬性可以定義線的描邊顏色，該屬性的取值為十六進(jìn)制顏色值或顏色的英文名稱。2.描邊顏色示例代碼context.strokeStyle='#f00';context.strokeStyle='red';11.2.4線的樣式

默認(rèn)情況下，線的端點(diǎn)是方形的，通過(guò)lineCap屬性可以改變端點(diǎn)的形狀。3.端點(diǎn)形狀語(yǔ)法格式lineCap='屬性值';屬性值顯示效果butt默認(rèn)效果，無(wú)端點(diǎn)round顯示圓形端點(diǎn)square顯示方形端點(diǎn)11.2.5線的路徑

在同一畫布中，如果想要開始繪制新的路徑，就需要使用beginPath()方法重置路徑。1.重置路徑11.2.5線的路徑

閉合路徑就是對(duì)繪制的開放路徑進(jìn)行封閉處理，以形成特定的形狀。在畫布中，使用closePath()方法閉合路徑。2.閉合路徑11.2.6填充圖形

使用fill()方法可以填充圖形varcontext=document.getElementById('cas').getContext('2d');context.moveTo(10,10);//定義初始位置context.lineTo(10,100); //定義連線端點(diǎn)context.lineTo(100,100);//定義連線端點(diǎn)context.closePath(); //閉合路徑context.fill(); //填充圖形默認(rèn)圖形的默認(rèn)顏色為黑色，可以使用fillStyle屬性更改填充顏色。和描邊顏色一樣，fillStyle屬性的值可以為十六進(jìn)制顏色值或顏色的英文名稱11.2.7繪制圓

在畫布中，使用arc()方法可以繪制圓或弧線基本語(yǔ)法格式arc(x,y,r,開始角,結(jié)束角,方向)x和y：表示圓心在x軸和y軸的坐標(biāo)位置，取值為數(shù)字。r：圓或弧形的半徑，用于確定圖形的大小。開始角：初始弧點(diǎn)的位置。其中弧點(diǎn)使用“數(shù)字*Math.PI（圓周率）”表示。結(jié)束角：結(jié)束弧點(diǎn)的位置，與開始角的設(shè)置方式一致。方向：分為順時(shí)針和逆時(shí)針兩種。當(dāng)取值為false時(shí)，表示沿順時(shí)針?lè)较蚶L制；取值為true時(shí)。表示沿逆時(shí)針?lè)较蚶L制。HTML5數(shù)據(jù)存儲(chǔ)基礎(chǔ)11.311.3.1原始存儲(chǔ)方式——Cookie

什么是Cookie？11.3.1原始存儲(chǔ)方式——Cookie

什么是Cookie？在餐館用餐時(shí)，服務(wù)員會(huì)給顧客一個(gè)餐桌號(hào)碼牌，便于記錄顧客的點(diǎn)餐信息。在網(wǎng)站制作中，Cookie就像餐桌號(hào)碼牌，它能幫助網(wǎng)站識(shí)別和記錄登錄網(wǎng)站用戶。例如，登錄某網(wǎng)站時(shí)，經(jīng)常看到頁(yè)面中的“自動(dòng)登錄”提示。11.3.1原始存儲(chǔ)方式——Cookie

在Web應(yīng)用程序中，Cookie是網(wǎng)站為了辨別用戶身份而存儲(chǔ)在用戶本地終端上的數(shù)據(jù)。當(dāng)用戶通過(guò)瀏覽器訪問(wèn)Web服務(wù)器時(shí)，服務(wù)器會(huì)給用戶發(fā)送一些信息，這些信息都保存在Cookie中。當(dāng)該瀏覽器再次訪問(wèn)服務(wù)器時(shí)，會(huì)在請(qǐng)求的同時(shí)將Cookie發(fā)送給服務(wù)器，這樣，服務(wù)器就可以對(duì)瀏覽器做出正確的響應(yīng)。利用Cookie可以跟蹤用戶與服務(wù)器之間的會(huì)話狀態(tài)，通常應(yīng)用于保存瀏覽歷史記錄、保存購(gòu)物車商品和保存用戶登錄狀態(tài)等場(chǎng)景。11.3.1原始存儲(chǔ)方式——Cookie

盡管Cookie實(shí)現(xiàn)了服務(wù)器與瀏覽器間的信息交互，但也存在一些的缺點(diǎn)，具體如下。安全風(fēng)險(xiǎn)：由于Cookie存儲(chǔ)在客戶端，攻擊者可能會(huì)竊取用戶的Cookie信息。隱私問(wèn)題：通過(guò)Cookie，網(wǎng)站可以跟蹤用戶的在線活動(dòng)并收集有關(guān)用戶的個(gè)人信息。例如購(gòu)買記錄、搜索歷史和地理位置等，這可能導(dǎo)致用戶的隱私受到侵犯。兼容性問(wèn)題：Cookie在不同的瀏覽器和設(shè)備上兼容性不同，有時(shí)可能會(huì)導(dǎo)致錯(cuò)誤或運(yùn)行緩慢。限制：Cookie存儲(chǔ)的數(shù)據(jù)量有限，通常限制為每個(gè)Cookie的存儲(chǔ)容量為4KB。對(duì)在某些情況下需要存儲(chǔ)大量數(shù)據(jù)的應(yīng)用程序來(lái)說(shuō)，這很可能是不夠的。性能問(wèn)題：每個(gè)請(qǐng)求會(huì)附帶Cookie信息，這可能會(huì)增加網(wǎng)絡(luò)帶寬，從而導(dǎo)致性能問(wèn)題，并且可能會(huì)影響Web應(yīng)用程序的響應(yīng)時(shí)間和加載速度。11.3.2HTML5全新的存儲(chǔ)技術(shù)——WebStorage

localStorage是一種長(zhǎng)期存儲(chǔ)方案，它允許網(wǎng)頁(yè)在用戶瀏覽器中存儲(chǔ)大量數(shù)據(jù)。存儲(chǔ)在localStorage中的數(shù)據(jù)是持久的，即使用戶關(guān)閉瀏覽器或重新啟動(dòng)計(jì)算機(jī)，數(shù)據(jù)仍然會(huì)被保留下來(lái)。由于localStorage是基于域名存儲(chǔ)的，所以不同的網(wǎng)頁(yè)可以將數(shù)據(jù)存儲(chǔ)在各自的localStorage中，不會(huì)相互干擾。sessionStorage是一種會(huì)話級(jí)別的存儲(chǔ)方案，它允許網(wǎng)頁(yè)在瀏覽器中臨時(shí)存儲(chǔ)數(shù)據(jù)。與localStorage不同，存儲(chǔ)在sessionStorage中的數(shù)據(jù)只在當(dāng)前瀏覽器窗口（或選項(xiàng)卡）中有效。在網(wǎng)頁(yè)中，一次會(huì)話是指從一個(gè)瀏覽器窗口（或選項(xiàng)卡）打開到關(guān)閉的過(guò)程，當(dāng)用戶關(guān)閉瀏覽器窗口（或選項(xiàng)卡