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

下載本文檔

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

文檔簡介

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

（第九講）主講教師：袁旭信息科學(xué)與技術(shù)學(xué)院八、實戰(zhàn)HTML5畫布（上）HTML5Canvas繪制簡單圖形嶺南師范學(xué)院1上講重點內(nèi)容canvas繪制直線繪制矩形繪制圓形繪制三角形繪制貝塞爾曲線嶺南師范學(xué)院28.1.1在網(wǎng)頁中添加canvas元素與HTML中的其他元素的用法類似，通過<canvas>…</canvas>在網(wǎng)頁中添加canvas。嶺南師范學(xué)院3<!doctypehtml><html><head><metacharset="utf-8"><title>Canvas</title></head><body></body></html><canvasid="myCanvas"width="300"height="150"></canvas>Canvas默認寬300px高150px8.1.1在網(wǎng)頁中添加canvas元素與HTML中的其他元素的用法類似，通過<canvas>…</canvas>在網(wǎng)頁中添加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)頁中添加canvas元素在沒有canvas畫布中繪制任何圖形前，canvas畫布是不可見的?？梢酝ㄟ^CSS中的border屬性為canvas設(shè)置實心的邊框。嶺南師范學(xué)院5<canvasid="myCanvas"style=“border:1pxsolid”width="300"height="150"></canvas>8.1.1在網(wǎng)頁中添加canvas元素嶺南師范學(xué)院68.1.2利用canvas繪制圖形的步驟canvas與HTML中的其他元素的相似之處也就到此為止啦，若要在canvas中繪制圖形，需要經(jīng)歷四關(guān)。嶺南師范學(xué)院7創(chuàng)建創(chuàng)建含id屬性的canvas元素尋找利用id尋找canvas元素獲取通過canvas元素的getContext方法獲取上下文繪制利用JavaScript繪制圖形①創(chuàng)建含id屬性的canvas元素在HTML5網(wǎng)頁中添加一個含有id屬性的canvas元素，以便接下來的步驟尋找到這個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中③通過getContext方法獲取上下文利用getContext方法在上一步查找到的canvas對象中創(chuàng)建一個允許進行圖形繪制的環(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繪制實心矩形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)原點(0,0)矩形坐標(biāo)(50,25)8.2繪制直線已有的數(shù)學(xué)知識告訴我們：兩點成線。在完成了“利用canvas繪制圖形”的前三個步驟之后，可以利用下面的JavaScript繪制直線。嶺南師范學(xué)院15moveTo(x,y)設(shè)置直線的起點lineTo(x,y)設(shè)置直線的終點stroke()兩點之間繪制直線8.2繪制直線嶺南師范學(xué)院16Context.moveTo(0,0);Context.lineTo(50,25);Context.stroke();x軸y軸直線起點(0,0)直線終點(50,25)8.3繪制矩形在canvas中繪制矩形需要考慮這樣兩個問題：矩形的顏色，包括邊框色與填充色矩形的位置及大小嶺南師范學(xué)院17實心矩形fillStylefillRect(x,y,width,height)空心矩形strokeStylestrokeRect(x,y,width,height)8.4繪制圓形圓形相比于直線和矩形來說要復(fù)雜不少。嶺南師范學(xué)院18開始路徑beginPath圓形路徑arc結(jié)束路徑closePath繪制圓形fillstroke繪制實心圓形嶺南師范學(xué)院19Context.beginPath();Context.arc(250,75,40,0,Math.PI*2,true);Context.fill();Context.fillStyle=“#FF0000”;acr(x,y,半徑,開始角度,結(jié)束角度,是否順時針)繪制空心圓形繪制空心圓形的方法與繪制實心圓形類似，只是在最后一步不是使用fill進行填充，而是使用stroke進行描邊。嶺南師范學(xué)院20Context.beginPath();Context.arc(250,75,20,0,Math.PI*2,true);Context.stroke();Context.strokeStyle=“#FFFFFF”;8.5繪制三角形嶺南師范學(xué)院21三角形可以理解為是由三條首尾相接的直線構(gòu)成的圖形。結(jié)合繪制直線時用到的moveTo與lineTo以及繪制圓形時用到的beginPath與closePath，外加一點點數(shù)學(xué)知識，便可以繪制出任意的三角形。Context.lineT0(210,75);Context.lineT0(290,75);Context.moveTo(250,35);8.6清空畫布嶺南師范學(xué)院22隨著繪制圖形的JavaScript代碼的執(zhí)行，在canvas上的圖形越來越多，一瞬間一切都變得亂糟糟，怎么辦？使用clearRect方法可以清除指定的矩形區(qū)域內(nèi)的所有圖形。clearRect(x,y,width,height)Context.clearRect(0,0,300,150);8.7繪制貝塞爾曲線嶺南師范學(xué)院23接觸過計算機繪圖的人想必不會對貝塞爾曲線（BezierCurve）陌生。三次方貝塞爾曲線8.7繪制貝塞爾曲線嶺南師范學(xué)院24接觸過計算機繪圖的人想必不會對貝塞爾曲線（BezierCurve）陌生。bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)Context.bezierCurveTo(25,50,80,200,250,75);八、實戰(zhàn)HTML5畫布（下）圖形的變換圖形的組合嶺南師范學(xué)院25本講重點內(nèi)容保存與恢復(fù)移動坐標(biāo)空間旋轉(zhuǎn)坐標(biāo)空間縮放圖形圖形的組合嶺南師范學(xué)院268.8保存與恢復(fù)Canvas狀態(tài)在canvas中可以繪制出各式各樣的圖形，但是每次繪制新的圖形都要設(shè)置很多屬性，繁瑣且容易出錯。通過save可以保存當(dāng)前的canvas狀態(tài)，包括各種屬性的值，然后通過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();這三段代碼繪制出來的是什么樣的圖形？8.8保存與恢復(fù)Canvas狀態(tài)嶺南師范學(xué)院298.9移動坐標(biāo)空間默認情況下canvas中的坐標(biāo)原點位于畫布的左上角。在繪圖時可以利用translate來移動坐標(biāo)空間，使得坐標(biāo)原點發(fā)生偏移。嶺南師范學(xué)院30Context.translate(dx,dy);8.9移動坐標(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();這三段代碼繪制出來的是什么樣的圖形？8.9移動坐標(biāo)空間嶺南師范學(xué)院328.10旋轉(zhuǎn)坐標(biāo)空間利用rotate可以旋轉(zhuǎn)canvas的坐標(biāo)空間。rotate只有一個參數(shù)，即旋轉(zhuǎn)角度angle，旋轉(zhuǎn)角度以順時針方向為正方向，以弧度為單位，旋轉(zhuǎn)中心為Canvas的原點。嶺南師范學(xué)院33Context.rotate(angle);8.10旋轉(zhuǎn)坐標(biāo)空間嶺南師范學(xué)院348.10旋轉(zhuǎn)坐標(biāo)空間嶺南師范學(xué)院35這三段代碼繪制出來的

溫馨提示

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

評論

0/150

提交評論