《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》課件 第10章 課業(yè)拓展_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》課件 第10章 課業(yè)拓展_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》課件 第10章 課業(yè)拓展_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》課件 第10章 課業(yè)拓展_第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》課件 第10章 課業(yè)拓展_第5頁(yè)
已閱讀5頁(yè)，還剩40頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(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即畫布，是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)畫。幾乎所有現(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畫布作為圖形容器，在頁(yè)面中表現(xiàn)為一個(gè)矩形區(qū)域Canvas畫布2d環(huán)境的坐標(biāo)系統(tǒng)延續(xù)web頁(yè)面的坐標(biāo)系統(tǒng)，默認(rèn)坐標(biāo)原點(diǎn)（0，0）在畫布左上角，向右為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畫布是一個(gè)圖形容器，是圖形的載體，其本身并不具備繪制能力，必須通過(guò)繪圖API實(shí)現(xiàn)圖形繪制。Canvas繪圖API的功能非常強(qiáng)大，包括：路徑、漸變色、圖形變換、繪制環(huán)境保存、圖像和文本繪制等。繪圖API由畫布的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)到畫布中的指定點(diǎn)，不創(chuàng)建路徑。lineTo(x,y)在畫布中創(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()從原始畫布剪切任意形狀和尺寸的區(qū)域表10-1

Canvas的常路徑方法列表-續(xù)繪圖的顏色屬性可以使用普通CSS顏色或漸變色，如fillStyle和strokeSty漸變色需要先創(chuàng)建漸變色對(duì)象，然后設(shè)置漸變色對(duì)象中的顏色分布，之后才能作為顏色屬性值使用。漸變色對(duì)象的創(chuàng)建很方便，由繪制環(huán)境創(chuàng)建。畫布的漸變色分為線性漸變和徑向漸變兩種。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è)繪制堆棧，包括畫布的當(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)大的圖像繪制功能，支持將圖片、畫布、視頻等元素繪制到指定位置。繪制方法：通過(guò)drawImage()方法完成圖像的繪制。該方法具備靈活的參數(shù)格式，支持縮放、裁剪等操作。適用范圍：圖片渲染視頻幀抓取自定義截圖與合成效果復(fù)雜動(dòng)畫中的貼圖操作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)畫。動(dòng)畫的實(shí)現(xiàn)方式是每一幀都重新繪制，也就是

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

用于控制幀的更新間隔（即動(dòng)畫節(jié)奏）動(dòng)畫制作常見(jiàn)應(yīng)用：路徑動(dòng)畫元素位移動(dòng)效模擬游戲幀刷新動(dòng)畫制作-三種動(dòng)畫控制方法（定時(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)畫使用

clearTimeout(id)

取消執(zhí)行單次延遲任務(wù)、遞歸實(shí)現(xiàn)的動(dòng)畫requestAnimationFrame(code[,element])瀏覽器優(yōu)化的逐幀執(zhí)行函數(shù)，自動(dòng)以顯示器刷新率（通常60fps）調(diào)用，動(dòng)畫更流暢、節(jié)能、精準(zhǔn)無(wú)專門取消方法（可通過(guò)邏輯控制不再觸發(fā)）所有Canvas動(dòng)畫場(chǎng)景（推薦）時(shí)鐘案例實(shí)踐本節(jié)案例綜合了路徑、變換、圖像及動(dòng)畫制作等知識(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面板可見(jiàn)；JS屬性在Console可見(jiàn)BootStrap解壓目錄?點(diǎn)運(yùn)算符（.）樣式表????字體??腳本BootStrap——預(yù)定義的樣式和控件?btn類??label類????nav類04架設(shè)互聯(lián)網(wǎng)網(wǎng)站域名服務(wù)域名IP郵件備案域名服務(wù)（DNS）將域名解析為IP地址，便于訪問(wèn)網(wǎng)站；郵件服務(wù)依賴域名指向郵件服務(wù)器IP；網(wǎng)站備案需將域名與IP綁定，確保合法合規(guī)。三者共同保障網(wǎng)絡(luò)服務(wù)的可訪問(wèn)性和合法性。域名注冊(cè)?注冊(cè)商????挑選

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論