網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)-第九講_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)-第九講_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)-第九講_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)-第九講_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)-第九講_第5頁(yè)
已閱讀5頁(yè)，還剩40頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)

（第九講）主講教師：袁旭信息科學(xué)與技術(shù)學(xué)院八、實(shí)戰(zhàn)HTML5畫(huà)布（上）HTML5Canvas繪制簡(jiǎn)單圖形嶺南師范學(xué)院1上講重點(diǎn)內(nèi)容canvas繪制直線(xiàn)繪制矩形繪制圓形繪制三角形繪制貝塞爾曲線(xiàn)嶺南師范學(xué)院28.1.1在網(wǎng)頁(yè)中添加canvas元素與HTML中的其他元素的用法類(lèi)似，通過(guò)<canvas>…</canvas>在網(wǎng)頁(yè)中添加canvas。嶺南師范學(xué)院3<!doctypehtml><html><head><metacharset="utf-8"><title>Canvas</title></head><body></body></html><canvasid="myCanvas"width="300"height="150"></canvas>Canvas默認(rèn)寬300px高150px8.1.1在網(wǎng)頁(yè)中添加canvas元素與HTML中的其他元素的用法類(lèi)似，通過(guò)<canvas>…</canvas>在網(wǎng)頁(yè)中添加canvas。嶺南師范學(xué)院4<!doctypehtml><html><head><metacharset="utf-8"><title>Canvas</title></head><body><canvasid="myCanvas"width="300"height="150"></canvas></body></html>8.1.1在網(wǎng)頁(yè)中添加canvas元素在沒(méi)有canvas畫(huà)布中繪制任何圖形前，canvas畫(huà)布是不可見(jiàn)的?？梢酝ㄟ^(guò)CSS中的border屬性為canvas設(shè)置實(shí)心的邊框。嶺南師范學(xué)院5<canvasid="myCanvas"style=“border:1pxsolid”width="300"height="150"></canvas>8.1.1在網(wǎng)頁(yè)中添加canvas元素嶺南師范學(xué)院68.1.2利用canvas繪制圖形的步驟canvas與HTML中的其他元素的相似之處也就到此為止啦，若要在canvas中繪制圖形，需要經(jīng)歷四關(guān)。嶺南師范學(xué)院7創(chuàng)建創(chuàng)建含id屬性的canvas元素尋找利用id尋找canvas元素獲取通過(guò)canvas元素的getContext方法獲取上下文繪制利用JavaScript繪制圖形①創(chuàng)建含id屬性的canvas元素在HTML5網(wǎng)頁(yè)中添加一個(gè)含有id屬性的canvas元素，以便接下來(lái)的步驟尋找到這個(gè)canvas元素。嶺南師范學(xué)院8<canvasid="myCanvas"width="300"height="150">抱歉，您的瀏覽器不支持canvas。</canvas>我的id是myCanvas②利用id尋找canvas元素利用JavaScript中的document.getElementById等方法，查到到上一步添加的canvas元素。嶺南師范學(xué)院9varmyCanvas=document.getElementById("myCanvas");將查找結(jié)果保存到myCanvas中③通過(guò)getContext方法獲取上下文利用getContext方法在上一步查找到的canvas對(duì)象中創(chuàng)建一個(gè)允許進(jìn)行圖形繪制的環(huán)境。嶺南師范學(xué)院10varContext=myCanvas.getContext("2d");2d表示繪制的是二維圖形④利用JavaScript繪制圖形在上一步創(chuàng)建好繪制二維圖形的環(huán)境Context之后，便可以在Context中繪制出各式各樣的圖形。嶺南師范學(xué)院11Context.fillStyle=“#FF10FA”;Context.fillRect(50,25,80,100);利用fillStyle設(shè)置填充色利用fillRect繪制實(shí)心矩形8.1.2利用canvas繪制圖形的步驟嶺南師范學(xué)院12<canvasid="myCanvas"width="300"height="150">抱歉，您的瀏覽器不支持canvas。</canvas>varmyCanvas=document.getElementById("myCanvas");varContext=myCanvas.getContext("2d");Context.fillStyle=“#FF10FA”;Context.fillRect(50,25,80,100);創(chuàng)建尋找獲取繪制8.1.2利用canvas繪制圖形的步驟嶺南師范學(xué)院13<!doctype

html><html><head><meta

charset="utf-8"><title>Canvas</title></head><body><canvasid="myCanvas"style="border:solid1px;"width="300"

height="150">抱歉，您的瀏覽器不支持canvas。</canvas><script

type="text/javascript">var

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

Context=myCanvas.getContext("2d");Context.fillStyle="#FF10FA";Context.fillRect(50,25,80,100);</script></body></html>創(chuàng)建尋找獲取繪制8.1.2利用canvas繪制圖形的步驟嶺南師范學(xué)院14x軸y軸坐標(biāo)原點(diǎn)(0,0)矩形坐標(biāo)(50,25)8.2繪制直線(xiàn)已有的數(shù)學(xué)知識(shí)告訴我們：兩點(diǎn)成線(xiàn)。在完成了“利用canvas繪制圖形”的前三個(gè)步驟之后，可以利用下面的JavaScript繪制直線(xiàn)。嶺南師范學(xué)院15moveTo(x,y)設(shè)置直線(xiàn)的起點(diǎn)lineTo(x,y)設(shè)置直線(xiàn)的終點(diǎn)stroke()兩點(diǎn)之間繪制直線(xiàn)8.2繪制直線(xiàn)嶺南師范學(xué)院16Context.moveTo(0,0);Context.lineTo(50,25);Context.stroke();x軸y軸直線(xiàn)起點(diǎn)(0,0)直線(xiàn)終點(diǎn)(50,25)8.3繪制矩形在canvas中繪制矩形需要考慮這樣兩個(gè)問(wèn)題：矩形的顏色，包括邊框色與填充色矩形的位置及大小嶺南師范學(xué)院17實(shí)心矩形fillStylefillRect(x,y,width,height)空心矩形strokeStylestrokeRect(x,y,width,height)8.4繪制圓形圓形相比于直線(xiàn)和矩形來(lái)說(shuō)要復(fù)雜不少。嶺南師范學(xué)院18開(kāi)始路徑beginPath圓形路徑arc結(jié)束路徑closePath繪制圓形fillstroke繪制實(shí)心圓形嶺南師范學(xué)院19Context.beginPath();Context.arc(250,75,40,0,Math.PI*2,true);Context.fill();Context.fillStyle=“#FF0000”;acr(x,y,半徑,開(kāi)始角度,結(jié)束角度,是否順時(shí)針)繪制空心圓形繪制空心圓形的方法與繪制實(shí)心圓形類(lèi)似，只是在最后一步不是使用fill進(jìn)行填充，而是使用stroke進(jìn)行描邊。嶺南師范學(xué)院20Context.beginPath();Context.arc(250,75,20,0,Math.PI*2,true);Context.stroke();Context.strokeStyle=“#FFFFFF”;8.5繪制三角形嶺南師范學(xué)院21三角形可以理解為是由三條首尾相接的直線(xiàn)構(gòu)成的圖形。結(jié)合繪制直線(xiàn)時(shí)用到的moveTo與lineTo以及繪制圓形時(shí)用到的beginPath與closePath，外加一點(diǎn)點(diǎn)數(shù)學(xué)知識(shí)，便可以繪制出任意的三角形。Context.lineT0(210,75);Context.lineT0(290,75);Context.moveTo(250,35);8.6清空畫(huà)布嶺南師范學(xué)院22隨著繪制圖形的JavaScript代碼的執(zhí)行，在canvas上的圖形越來(lái)越多，一瞬間一切都變得亂糟糟，怎么辦？使用clearRect方法可以清除指定的矩形區(qū)域內(nèi)的所有圖形。clearRect(x,y,width,height)Context.clearRect(0,0,300,150);8.7繪制貝塞爾曲線(xiàn)嶺南師范學(xué)院23接觸過(guò)計(jì)算機(jī)繪圖的人想必不會(huì)對(duì)貝塞爾曲線(xiàn)（BezierCurve）陌生。三次方貝塞爾曲線(xiàn)8.7繪制貝塞爾曲線(xiàn)嶺南師范學(xué)院24接觸過(guò)計(jì)算機(jī)繪圖的人想必不會(huì)對(duì)貝塞爾曲線(xiàn)（BezierCurve）陌生。bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)Context.bezierCurveTo(25,50,80,200,250,75);八、實(shí)戰(zhàn)HTML5畫(huà)布（下）圖形的變換圖形的組合嶺南師范學(xué)院25本講重點(diǎn)內(nèi)容保存與恢復(fù)移動(dòng)坐標(biāo)空間旋轉(zhuǎn)坐標(biāo)空間縮放圖形圖形的組合嶺南師范學(xué)院268.8保存與恢復(fù)Canvas狀態(tài)在canvas中可以繪制出各式各樣的圖形，但是每次繪制新的圖形都要設(shè)置很多屬性，繁瑣且容易出錯(cuò)。通過(guò)save可以保存當(dāng)前的canvas狀態(tài)，包括各種屬性的值，然后通過(guò)restore可以恢復(fù)之前保存的狀態(tài)。嶺南師范學(xué)院27save()restore()8.8保存與恢復(fù)Canvas狀態(tài)嶺南師范學(xué)院28Context.fillStyle="#0000FF";Context.save();Context.fillStyle="#FF0000";Context.beginPath();Context.arc(250,75,50,0,Math.PI*2,true);Context.closePath();Context.fill();Context.fillStyle="#00FF00";Context.beginPath();Context.arc(160,225,50,0,Math.PI*2,true);Context.closePath();Context.fill();Context.restore();Context.beginPath();Context.arc(340,225,50,0,Math.PI*2,true);Context.closePath();Context.fill();這三段代碼繪制出來(lái)的是什么樣的圖形？8.8保存與恢復(fù)Canvas狀態(tài)嶺南師范學(xué)院298.9移動(dòng)坐標(biāo)空間默認(rèn)情況下canvas中的坐標(biāo)原點(diǎn)位于畫(huà)布的左上角。在繪圖時(shí)可以利用translate來(lái)移動(dòng)坐標(biāo)空間，使得坐標(biāo)原點(diǎn)發(fā)生偏移。嶺南師范學(xué)院30Context.translate(dx,dy);8.9移動(dòng)坐標(biāo)空間嶺南師范學(xué)院31Context.fillStyle="#0000FF";Context.save();Context.translate(250,75);Context.fillStyle="#FF0000";Context.beginPath();Context.arc(0,0,50,0,Math.PI*2,true);Context.closePath();Context.fill();Context.translate(-90,150);Context.fillStyle="#00FF00";Context.beginPath();Context.arc(0,0,50,0,Math.PI*2,true);Context.closePath();Context.fill();Context.restore();Context.beginPath()Context.arc(340,225,50,0,Math.PI*2,true);Context.closePath();Context.fill();這三段代碼繪制出來(lái)的是什么樣的圖形？8.9移動(dòng)坐標(biāo)空間嶺南師范學(xué)院328.10旋轉(zhuǎn)坐標(biāo)空間利用rotate可以旋轉(zhuǎn)canvas的坐標(biāo)空間。rotate只有一個(gè)參數(shù)，即旋轉(zhuǎn)角度angle，旋轉(zhuǎn)角度以順時(shí)針?lè)较驗(yàn)檎较?，以弧度為單位，旋轉(zhuǎn)中心為Canvas的原點(diǎn)。嶺南師范學(xué)院33Context.rotate(angle);8.10旋轉(zhuǎn)坐標(biāo)空間嶺南師范學(xué)院348.10旋轉(zhuǎn)坐標(biāo)空間嶺南師范學(xué)院35這三段代碼繪制出來(lái)的

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論