第9章網(wǎng)站設(shè)計(jì)綜合實(shí)訓(xùn)網(wǎng)頁(yè)設(shè)計(jì)與Web前端開(kāi)發(fā)案例教程CONTENT目錄網(wǎng)站的規(guī)劃01素材準(zhǔn)備及管理02外觀設(shè)計(jì)及布局03向頁(yè)面添加內(nèi)容04使用CSS設(shè)置頁(yè)面05添加網(wǎng)頁(yè)特效及功能06站點(diǎn)的測(cè)試、發(fā)布及維護(hù)07課程設(shè)計(jì)及要求0801網(wǎng)站的規(guī)劃網(wǎng)站設(shè)計(jì)項(xiàng)目書(shū)核心內(nèi)容市場(chǎng)分析（行業(yè)特點(diǎn)、競(jìng)爭(zhēng)對(duì)手）功能定位（宣傳型/電商型/服務(wù)型）技術(shù)解決方案（服務(wù)器、操作系統(tǒng)、安全措施）案例對(duì)比??例9-1：信息項(xiàng)目部（側(cè)重市場(chǎng)分析）例9-2：集團(tuán)網(wǎng)站（側(cè)重需求與設(shè)計(jì)）1.建設(shè)網(wǎng)站前的市場(chǎng)分析2.建設(shè)網(wǎng)站目的及功能定位3.網(wǎng)站技術(shù)解決方案4.網(wǎng)站內(nèi)容規(guī)劃5.網(wǎng)頁(yè)設(shè)計(jì)6.網(wǎng)站維護(hù)7.網(wǎng)站測(cè)試8.網(wǎng)站發(fā)布與推廣9.網(wǎng)站建設(shè)日程表10.費(fèi)用明細(xì)網(wǎng)站設(shè)計(jì)項(xiàng)目書(shū)包含的內(nèi)容網(wǎng)站主要規(guī)劃過(guò)程及創(chuàng)建020301確定網(wǎng)站主題教學(xué)類網(wǎng)站，主題為“課程教學(xué)及交流平臺(tái)”確定網(wǎng)站風(fēng)格淺藍(lán)色主色調(diào)，營(yíng)造專業(yè)學(xué)習(xí)氛圍構(gòu)思網(wǎng)站欄目結(jié)構(gòu)劃分5大功能模塊及15個(gè)子欄目，搭建清晰層級(jí)，便于內(nèi)容分類與用戶瀏覽導(dǎo)航。網(wǎng)站主要規(guī)劃過(guò)程及創(chuàng)建04規(guī)劃網(wǎng)站目錄結(jié)構(gòu)邏輯清晰的文件組織02網(wǎng)站的素材準(zhǔn)備及管理?網(wǎng)站的素材準(zhǔn)備及管理0201準(zhǔn)備文本搜集文字資料，整理為Word或文本文件（命名科學(xué)）準(zhǔn)備圖片及按鈕搜集或自制圖片，確保主題一致初始頁(yè)面效果圖0403準(zhǔn)備動(dòng)畫(huà)使用CSS3/JavaScript或?qū)I(yè)軟件（如AdobeAnimate）建立模板??定義可復(fù)用組件（如版權(quán)區(qū)）03網(wǎng)頁(yè)外觀設(shè)計(jì)及布局網(wǎng)頁(yè)外觀布局0201紙上布局法草圖繪制，避免隨意設(shè)計(jì)軟件布局法使用Photoshop等工具創(chuàng)建實(shí)體模型（結(jié)合層功能）實(shí)踐建議紙上構(gòu)思后軟件實(shí)現(xiàn)，參考第1章實(shí)例網(wǎng)頁(yè)布局的方案常見(jiàn)布局技術(shù)HTML5/CSS3/JavaScript課程網(wǎng)站應(yīng)用??拐角型風(fēng)格，彈性布局方案響應(yīng)式布局（自適應(yīng)設(shè)備）流式布局（百分比寬度）彈性布局（Flexbox）網(wǎng)格布局（Grid）固定布局（尺寸固定）浮動(dòng)布局（傳統(tǒng)方式）定位布局（精確控制）布局方式主要頁(yè)面布局方案04向頁(yè)面添加內(nèi)容向頁(yè)面添加內(nèi)容步驟設(shè)置頁(yè)面屬性、插入元素、定義HTML結(jié)構(gòu)設(shè)置標(biāo)題為“網(wǎng)絡(luò)課程”插入導(dǎo)航動(dòng)畫(huà)和背景div定義當(dāng)前位置HTML結(jié)構(gòu)（如<divclass="guild">）創(chuàng)建導(dǎo)航菜單（無(wú)序列表）添加主體內(nèi)容（標(biāo)題和列表）[例9-4]：以“網(wǎng)絡(luò)課程”頁(yè)面為例頁(yè)面內(nèi)容效果圖05使用CSS設(shè)置頁(yè)面?使用CSS設(shè)置頁(yè)面?方法公用CSS文件統(tǒng)一風(fēng)格（如style.css），額外樣式表處理特殊頁(yè)面示例課程網(wǎng)站公用CSS代碼（定義body、布局容器、導(dǎo)航區(qū)樣式）關(guān)鍵代碼：彈性布局、最小高度、背景顏色設(shè)置調(diào)用方式：<linkhref="css/style.css"rel="stylesheet">實(shí)踐結(jié)合頁(yè)面需求修改CSS（如課程簡(jiǎn)介頁(yè)面調(diào)用jxdg.css）06添加網(wǎng)頁(yè)特效及功能添加網(wǎng)頁(yè)特效-浮動(dòng)廣告示例?實(shí)現(xiàn)方法下載/修改現(xiàn)有JavaScript代碼（如浮動(dòng)廣告）查找代碼資源（關(guān)鍵詞搜索）修改HTML：插入div和img標(biāo)簽，調(diào)整路徑和尺寸添加JavaScript文件（fdgg.js）：控制移動(dòng)邏輯步驟資源頁(yè)面參考參數(shù)調(diào)整下載/修改現(xiàn)有JavaScript代碼（如浮動(dòng)廣告）效果圖添加網(wǎng)頁(yè)功能-顯示/隱藏答案JavaScript按鈕事件編程函數(shù)定義：showhide()控制顯示/隱藏狀態(tài)HTML結(jié)構(gòu)：按鈕與嵌套表格（id綁定）功能實(shí)現(xiàn)點(diǎn)擊后效果圖（顯示答案）初始效果圖（顯示答案前）添加網(wǎng)頁(yè)功能-自測(cè)練習(xí)JavaScript按鈕表單編程數(shù)組定義：標(biāo)識(shí)正確答案（如ans數(shù)組）函數(shù)：Engine()統(tǒng)計(jì)正確數(shù)，total()處理交卷邏輯顯示答案功能：一鍵控制所有題目功能實(shí)現(xiàn)測(cè)試結(jié)果提示頁(yè)面效果圖確認(rèn)對(duì)話框07站點(diǎn)的測(cè)試、發(fā)布及維護(hù)上傳文件使用FTP工具（如FileZilla）方法上傳下載界面設(shè)置站點(diǎn)管理器文件放置Web目錄（如www、web、htdocs）注意點(diǎn)獲取網(wǎng)站地址?獨(dú)立域名（如）獨(dú)立IP（如95）目錄空間（如/JudgeOnline）訪問(wèn)方式非80端口需額外指定端口處理實(shí)機(jī)測(cè)試及日常維護(hù)?必要性：本地環(huán)境與網(wǎng)絡(luò)環(huán)境差異測(cè)試內(nèi)容：兼容性、安全性、性能工具建議：WebZIP抓取或手動(dòng)測(cè)試實(shí)機(jī)測(cè)試任務(wù)：內(nèi)容更新、數(shù)據(jù)備份安全監(jiān)控：處理違規(guī)內(nèi)容（如論壇留言）維護(hù)制度化：制定定期更新計(jì)劃日常維護(hù)08課程設(shè)計(jì)課程設(shè)計(jì)的基本目的?目標(biāo)：全面掌握網(wǎng)站建設(shè)理論及實(shí)踐技能培養(yǎng)：網(wǎng)站規(guī)劃、設(shè)計(jì)、開(kāi)發(fā)、維護(hù)全流程成果：完成一般性網(wǎng)站建設(shè)內(nèi)容要點(diǎn)課程設(shè)計(jì)的基本要求?任務(wù)、要求及軟件環(huán)境網(wǎng)站規(guī)劃（市場(chǎng)分析、功能定位）欄目結(jié)構(gòu)與導(dǎo)航圖設(shè)計(jì)報(bào)告根據(jù)能力選擇題目（可自定義但需教師認(rèn)可）選題要求獨(dú)立完成，避免隨意更改方案設(shè)計(jì)總要求指導(dǎo)教師當(dāng)場(chǎng)運(yùn)行測(cè)試驗(yàn)收流程書(shū)面文檔（固定規(guī)格）內(nèi)容制作過(guò)程測(cè)試及發(fā)布情況總結(jié)與體會(huì)課程設(shè)計(jì)的考核方式與評(píng)分方法??網(wǎng)站設(shè)計(jì)外觀、功能及效果（40%）課程設(shè)計(jì)報(bào)告質(zhì)量（20%）平時(shí)成績(jī)與學(xué)習(xí)態(tài)度（20%）考核提問(wèn)表現(xiàn)（20%）考核標(biāo)準(zhǔn)優(yōu)、良、中、及格、不及格成績(jī)?cè)u(píng)定附錄：課程設(shè)計(jì)報(bào)告樣例題目（如×××網(wǎng)站的設(shè)計(jì)）設(shè)計(jì)任務(wù)和要求軟件環(huán)境及工具網(wǎng)站規(guī)劃（風(fēng)格、色彩、內(nèi)容草圖）內(nèi)容結(jié)構(gòu)宋體小四報(bào)告格式欄目介紹（首頁(yè)、欄目1、欄目2等）測(cè)試及發(fā)布情況答辯驗(yàn)收設(shè)計(jì)總結(jié)THANKS感謝觀看網(wǎng)頁(yè)設(shè)計(jì)與Web前端開(kāi)發(fā)案例教程第10章

課業(yè)拓展CONTENT目錄瀏覽器開(kāi)發(fā)者工具01Canvas圖形繪制02BootStrap框架03架設(shè)互聯(lián)網(wǎng)網(wǎng)站04云服務(wù)0501瀏覽器開(kāi)發(fā)者工具瀏覽器開(kāi)發(fā)者工具簡(jiǎn)介元素Element鼠標(biāo)選中元素→查看HTML源碼→修改HTML片段終端Console查看Javascript報(bào)錯(cuò)+即時(shí)運(yùn)行JS語(yǔ)句+打印日志安全性特點(diǎn)禁止訪問(wèn)本地硬盤不允許對(duì)網(wǎng)絡(luò)中的文本修改或刪除網(wǎng)絡(luò)Network查看失效鏈接→查看原始HTTP報(bào)文→查看網(wǎng)絡(luò)傳輸錯(cuò)誤激活工具欄：快捷鍵F12快捷鍵F12直接按下F12快捷鍵激活檢查元素右鍵點(diǎn)擊頁(yè)面元素，在右鍵菜單中選擇“檢查”選擇元素與Element標(biāo)簽選擇元素鼠標(biāo)可以在左側(cè)點(diǎn)擊元素，右側(cè)自動(dòng)跳轉(zhuǎn)對(duì)應(yīng)源碼鼠標(biāo)也可以懸停右側(cè)源碼，左側(cè)自動(dòng)提示對(duì)應(yīng)元素Console標(biāo)簽欄--查看報(bào)錯(cuò)Console標(biāo)簽欄--打印日志、招聘廣告02Canvas圖形繪制初識(shí)Canvas?Canvas即畫(huà)布，是HTML5加入的元素，用于像素圖形的繪制。Canvas出現(xiàn)之前，頁(yè)面中的圖形繪制需要使用插件實(shí)現(xiàn)，如Flash和SVG(ScalableVectorGraphics，可伸縮矢量圖形)，或者可以通過(guò)復(fù)雜的JavaScript代碼來(lái)實(shí)現(xiàn)。在頁(yè)面中加入了Canvas元素后，便可以通過(guò)JavaScript來(lái)自由地控制它，在其中添加圖片、線條以及文字，也可以在里面繪圖，甚至還可以加入高級(jí)動(dòng)畫(huà)。幾乎所有現(xiàn)代的主流瀏覽器都支持Canvas。不同瀏覽器對(duì)Canvas的支持程度和性能可能會(huì)有所差異，因此在開(kāi)發(fā)過(guò)程中建議進(jìn)行兼容性測(cè)試，并根據(jù)不同瀏覽器的特點(diǎn)進(jìn)行適配和優(yōu)化。Canvas的坐標(biāo)系統(tǒng)Canvas畫(huà)布作為圖形容器，在頁(yè)面中表現(xiàn)為一個(gè)矩形區(qū)域Canvas畫(huà)布2d環(huán)境的坐標(biāo)系統(tǒng)延續(xù)web頁(yè)面的坐標(biāo)系統(tǒng)，默認(rèn)坐標(biāo)原點(diǎn)（0，0）在畫(huà)布左上角，向右為x軸正向，向下為y軸正向，如圖10-12中左圖所示。在Canvas中除了坐標(biāo)系統(tǒng)外，還經(jīng)常使用到角度度量。Canvas中默認(rèn)x軸正向?yàn)?度，順時(shí)針的角度為正值，逆時(shí)針的角度為負(fù)值，如圖10-12中右圖所示。X軸Y軸原點(diǎn)（0，0）

0°-90°

180°90°圖10-12Canvas默認(rèn)坐標(biāo)系統(tǒng)圖使用Canvas的第一步是在Web頁(yè)面中添加一個(gè)Canvas。添加Canvas很簡(jiǎn)單，只需要在<body>標(biāo)簽內(nèi)添加一個(gè)<canvas>標(biāo)簽就可以了對(duì)Canvas元素的所有操作都要通過(guò)腳本代碼實(shí)現(xiàn)，為了便于在JavaScript中更好的操作Canvas，通常給Canvas標(biāo)簽添加id屬性，通過(guò)id可以快速準(zhǔn)確找到Canvas。Canvas默認(rèn)高度寬度為300×150像素通常情況下用戶需要重新設(shè)置Canvas的大小Canvas的寬度和寬度設(shè)置要在HTML標(biāo)簽中設(shè)置高度與寬度屬性，或者通過(guò)JavaScript對(duì)Canvas對(duì)象的width和height屬性進(jìn)行賦值。除了高度和寬度，Canvas的其他樣式都可以交由CSS進(jìn)行設(shè)置。Canvas的坐標(biāo)系統(tǒng)每個(gè)Canvas包含內(nèi)建的context對(duì)象（繪制環(huán)境/上下文），是訪問(wèn)繪圖API的入口。獲取方法：通過(guò)canvas.getContext(繪制類型)創(chuàng)建一個(gè)上下文對(duì)象單擊此處輸入你的項(xiàng)正文，文字是您思想的提煉，請(qǐng)盡量言簡(jiǎn)意賅的闡述觀點(diǎn)。

繪制環(huán)境（Context）繪制類型說(shuō)明2d二維渲染上下文（最常用）webglWebGL1版本三維渲染上下文webgl2WebGL2版本三維渲染上下文bitmaprenderer僅提供將canvas內(nèi)容替換為指定ImageBitmap的功能的上下文webgpu

創(chuàng)建一個(gè)GPUcanvas上下文對(duì)象，為WebGPU渲染管道提供三維渲染繪制一個(gè)紅色邊框的矩形的步驟：首先通過(guò)id獲得Canvas對(duì)象獲得該Canvas的2d繪制環(huán)境執(zhí)行繪圖API：設(shè)置筆觸顏色為紅色，創(chuàng)建一個(gè)從（20，20）位置開(kāi)始填充一個(gè)長(zhǎng)100，高50的矩形路徑，最后將矩形路徑進(jìn)行描邊繪制代碼：var

canvas=document.getElementById("myCanvas");var

context=canvas.getContext("2d");context.strokeStyle="#FF0000";context.rect(20,20,100,50);context.stroke();第一個(gè)繪制實(shí)例Canvas繪圖API就是用來(lái)在Canvas中進(jìn)行圖形圖像設(shè)置、繪制以及變換的一系列屬性和方法。Canvas畫(huà)布是一個(gè)圖形容器，是圖形的載體，其本身并不具備繪制能力，必須通過(guò)繪圖API實(shí)現(xiàn)圖形繪制。Canvas繪圖API的功能非常強(qiáng)大，包括：路徑、漸變色、圖形變換、繪制環(huán)境保存、圖像和文本繪制等。繪圖API由畫(huà)布的context對(duì)象調(diào)用繪圖API路徑是點(diǎn)及點(diǎn)間連線，可繪制矩形、圓弧、直線、曲線等常用屬性和方法：lineWidth、fillStyle、strokeStyle、beginPath()、closePath()等1.繪制路徑表10-1

Canvas的常路徑方法列表屬性和方法說(shuō)

明lineWidth筆觸（描邊）寬度，默認(rèn)值為1.0fillStyle填充顏色，默認(rèn)值為黑色strokeStyle筆觸(描邊)顏色，默認(rèn)值為黑色beginPath()起始一條路徑，或重置當(dāng)前路徑closePath()將路徑從當(dāng)前點(diǎn)到起始點(diǎn)進(jìn)行閉合。save()將當(dāng)前環(huán)境狀態(tài)保存到堆棧中restore()從堆棧中恢復(fù)最后保存的環(huán)境狀態(tài)屬性和方法說(shuō)

明moveTo(x,y)把路徑移動(dòng)到畫(huà)布中的指定點(diǎn)，不創(chuàng)建路徑。lineTo(x,y)在畫(huà)布中創(chuàng)建從當(dāng)前點(diǎn)到指定點(diǎn)(x,y)的直線路徑rect(x,y,width,height);在（x，y）位置創(chuàng)建一個(gè)矩形路徑，寬度width，高度heightarc(x,y,r,stratAngle,endAngle[,anticlockwise])以（x，y）為圓心，r為半徑，從stratAngle角度開(kāi)始到endAngle創(chuàng)建弧線路徑arcTo(x1,y1,x2,y2,r)在(x1,y1)和(x2,y2)兩點(diǎn)間創(chuàng)建半徑為r的弧線路徑quadraticCurveTo(cpx,cpy,x,y)在當(dāng)前點(diǎn)和（x，y）之間以（cpx,cpy）為控點(diǎn)創(chuàng)建二次貝塞爾曲線路徑bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)在當(dāng)前點(diǎn)和（x，y）之間以（cpx1,cpy1）和（cpx1,cpy1）為控點(diǎn)創(chuàng)建三次貝塞爾曲線。stroke()使用strokeStyle的值對(duì)當(dāng)前路徑進(jìn)行描邊f(xié)ill()使用fillStyle的值對(duì)當(dāng)前路徑區(qū)域進(jìn)行填充clearRect(x,y,width,height)清除指定的矩形區(qū)域fillRect(x,y,width,height)填充指定的矩形區(qū)域clip()從原始畫(huà)布剪切任意形狀和尺寸的區(qū)域表10-1

Canvas的常路徑方法列表-續(xù)繪圖的顏色屬性可以使用普通CSS顏色或漸變色，如fillStyle和strokeSty漸變色需要先創(chuàng)建漸變色對(duì)象，然后設(shè)置漸變色對(duì)象中的顏色分布，之后才能作為顏色屬性值使用。漸變色對(duì)象的創(chuàng)建很方便，由繪制環(huán)境創(chuàng)建。畫(huà)布的漸變色分為線性漸變和徑向漸變兩種。1.線性漸變（LinearGradient）：

顏色沿一條直線方向平滑過(guò)渡，適用于平面、背景等區(qū)域。2.徑向漸變（RadialGradient）：

顏色從一個(gè)中心點(diǎn)向四周以圓形方式擴(kuò)散變化，適用于按鈕、光源等效果。2漸變色的使用生成方法：通過(guò)繪制環(huán)境調(diào)用createLinearGradient()方法創(chuàng)建，代碼如下參數(shù)說(shuō)明：x0,y0：起始點(diǎn)坐標(biāo)x1,y1：終止點(diǎn)坐標(biāo)線性漸變色會(huì)從起點(diǎn)到終點(diǎn)沿直線方向變化，如圖所示不同的起始點(diǎn)和終止點(diǎn)線性漸變色方向。2漸變色的使用--線性漸變色varlineGrad=context.createLinearGradient(x0,y0,x1,y1)生成方法：通過(guò)繪制環(huán)境調(diào)用createRadialGradient()方法創(chuàng)建，代碼如下參數(shù)說(shuō)明：(x0,y0)：徑向漸變色起始環(huán)的圓心坐標(biāo)r0：起始環(huán)的半徑(x1,y1)：徑向漸變色終止環(huán)的圓心坐標(biāo)r1：終止環(huán)的半徑徑向漸變色會(huì)從起點(diǎn)環(huán)到終止環(huán)放射狀變化，如圖所示不同的起始環(huán)和終止環(huán)漸變色放射方向。典型用途：模擬光照、球體陰影、創(chuàng)建高光、聚焦、按鈕等立體視覺(jué)效果2漸變色的使用-徑向漸變色varradialGrad=context.createRadialGradient(x0,y0,r0,x1,y1,r1)漸變色可在不同位置添加的不同顏色對(duì)漸變色進(jìn)行改變漸變色對(duì)象通過(guò)調(diào)用addColorStop(offset,color)添加顏色分布點(diǎn)：參數(shù)說(shuō)明：offset：取值范圍為0~1，表示顏色所在位置color：顏色值（如"#FF0000"或"rgba(0,0,0,0.5)"）2漸變色的使用-設(shè)置顏色點(diǎn)在Canvas繪圖API中，提供了一系列對(duì)當(dāng)前繪制環(huán)境進(jìn)行變換的方法，可以實(shí)現(xiàn)縮放、旋轉(zhuǎn)、移動(dòng)等變換功能3.圖形變換表10-2

Canvas常用變換方法列表方法說(shuō)

明scale(scaleX,scaleY)將當(dāng)前繪制環(huán)境的尺寸進(jìn)行縮放，

scaleX為x軸縮放倍數(shù)，scaleY為y軸縮放倍數(shù)rotate(angle)將當(dāng)前繪制環(huán)境進(jìn)行旋轉(zhuǎn)，angle為旋轉(zhuǎn)的弧度translate(x,y)將當(dāng)前繪制環(huán)境的坐標(biāo)原點(diǎn)移動(dòng)到(x,y)位置transform(a,b,c,d,e,f)將當(dāng)前繪制環(huán)境按照轉(zhuǎn)換矩陣進(jìn)行轉(zhuǎn)換setTransform(a,b,c,d,e,f)將當(dāng)前轉(zhuǎn)換重置為單位矩陣Canvas通過(guò)繪制環(huán)境context對(duì)象繪制圖形時(shí)，context對(duì)象包含了繪制過(guò)程所需要的當(dāng)前狀態(tài)。當(dāng)前狀態(tài)是一個(gè)繪制堆棧，包括畫(huà)布的當(dāng)前屬性、變換矩陣信息和當(dāng)前剪裁區(qū)域。繪制環(huán)境狀態(tài)可以通過(guò)API進(jìn)行保存和恢復(fù)，通過(guò)調(diào)用save()可以將當(dāng)前的狀態(tài)保存到堆棧中。而通過(guò)調(diào)用restore()可以將保存的狀態(tài)恢復(fù)到繪制環(huán)境中。當(dāng)前屬性包括globalAlpha、strokeStyle、fillStyle等所有的API屬性變換矩陣信息包括坐標(biāo)系統(tǒng)原點(diǎn)、坐標(biāo)系統(tǒng)尺寸、角度坐標(biāo)系統(tǒng)等剪輯區(qū)域是通過(guò)clip()方法獲得的當(dāng)前路徑的剪輯區(qū)域。路徑不屬于繪制環(huán)境中的狀態(tài)，不能保存在狀態(tài)堆棧中。4繪制環(huán)境的保存與恢復(fù)Canvas提供強(qiáng)大的圖像繪制功能，支持將圖片、畫(huà)布、視頻等元素繪制到指定位置。繪制方法：通過(guò)drawImage()方法完成圖像的繪制。該方法具備靈活的參數(shù)格式，支持縮放、裁剪等操作。適用范圍：圖片渲染視頻幀抓取自定義截圖與合成效果復(fù)雜動(dòng)畫(huà)中的貼圖操作5繪制圖像

加載時(shí)機(jī)：圖像繪制必須在圖片加載完成后進(jìn)行。否則，繪制將失敗且無(wú)任何提示。drawImage()三種調(diào)用格式第一種格式：drawImage(image,dx,dy) 說(shuō)明：

以原圖尺寸繪制圖像，左上角位于(dx,dy)第二種格式：? drawImage(image,dx,dy,dw,dh)說(shuō)明：

將圖像縮放至目標(biāo)矩形區(qū)域，左上角為(dx,dy)，尺寸為dw×dh第三種格式：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)說(shuō)明：

從源圖像中裁剪(sx,sy,sw,sh)區(qū)域，縮放并繪制至目標(biāo)(dx,dy,dw,dh)??

注意：

參數(shù)格式不可混用，只能使用這三種完整組合方式。5繪制圖像

CanvasAPI中提供了一些基本的文本屬性和方法，這些屬性和方法使得Canvas中的文本操作變得非常簡(jiǎn)單，表10-3中列出了常用的文本屬性和方法6繪制文本表10-3

Canvas的文本屬性和方法列表屬性和方法示

例font字體屬性，其語(yǔ)法與CSS的font屬性相同textAlign對(duì)齊方式，可設(shè)置值有center、end、left、right和start（默認(rèn)值）textBaseline文本基線，可設(shè)置值有alphabetic（默認(rèn)值）、top、hanging、middle、ideographic、bottomfillText(text,x,y)從（x,y）開(kāi)始的位置對(duì)將text內(nèi)容進(jìn)行填充strokeText(text,x,y)從（x,y）開(kāi)始的位置對(duì)將text內(nèi)容進(jìn)行描邊measureText(text)測(cè)量text文本在當(dāng)前繪制環(huán)境中的寬度，使用measureText(text).width可獲得寬度數(shù)值Canvas是靜態(tài)圖形容器：繪制完成的內(nèi)容不會(huì)自動(dòng)變化，因此無(wú)法直接實(shí)現(xiàn)動(dòng)畫(huà)。動(dòng)畫(huà)的實(shí)現(xiàn)方式是每一幀都重新繪制，也就是

逐幀動(dòng)畫(huà)=每幀刷新畫(huà)面+更新圖形狀態(tài)依賴JavaScript的定時(shí)函數(shù)：

用于控制幀的更新間隔（即動(dòng)畫(huà)節(jié)奏）動(dòng)畫(huà)制作常見(jiàn)應(yīng)用：路徑動(dòng)畫(huà)元素位移動(dòng)效模擬游戲幀刷新動(dòng)畫(huà)制作-三種動(dòng)畫(huà)控制方法（定時(shí)器）特點(diǎn)控制方式適用場(chǎng)景setInterval(code,millisec)固定時(shí)間間隔重復(fù)執(zhí)行，無(wú)限觸發(fā)使用

id=setInterval(...)

獲取ID，通過(guò)

clearInterval(id)

停止執(zhí)行需要定期重復(fù)執(zhí)行的任務(wù)setTimeout(code,millisec)延遲指定時(shí)間后只執(zhí)行一次，適合延遲任務(wù)和遞歸動(dòng)畫(huà)使用

clearTimeout(id)

取消執(zhí)行單次延遲任務(wù)、遞歸實(shí)現(xiàn)的動(dòng)畫(huà)requestAnimationFrame(code[,element])瀏覽器優(yōu)化的逐幀執(zhí)行函數(shù)，自動(dòng)以顯示器刷新率（通常60fps）調(diào)用，動(dòng)畫(huà)更流暢、節(jié)能、精準(zhǔn)無(wú)專門取消方法（可通過(guò)邏輯控制不再觸發(fā)）所有Canvas動(dòng)畫(huà)場(chǎng)景（推薦）時(shí)鐘案例實(shí)踐本節(jié)案例綜合了路徑、變換、圖像及動(dòng)畫(huà)制作等知識(shí)制作了一個(gè)時(shí)鐘。實(shí)現(xiàn)步驟如下：設(shè)計(jì)時(shí)鐘樣式添加Canvas元素加載背景圖片設(shè)置時(shí)鐘繪制觸發(fā)機(jī)制實(shí)現(xiàn)核心繪制函數(shù)drawAClock()分模塊繪制函數(shù)實(shí)現(xiàn)完整代碼可參考pra10.html文件。03BootStrap框架BootStrap快速上手??不同版本，效果有差異原理一致導(dǎo)入css和js文件即可使用存儲(chǔ)位置：HTML標(biāo)簽屬性→DOM結(jié)構(gòu)；JS對(duì)象屬性→內(nèi)存可見(jiàn)性：標(biāo)簽屬性在Elements面