HTML5與CSS3項(xiàng)目實(shí)戰(zhàn) (7)教學(xué)課件

1、企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群） 01 學(xué)習(xí)目標(biāo) 02 學(xué)習(xí)路徑 03 任務(wù)描述 04 任務(wù)技能 05 任務(wù)實(shí)施 06 任務(wù)總結(jié)01 學(xué)習(xí)目標(biāo) 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)010203了解Canvas了解陰影效果和顏色漸變效果的設(shè)置掌握使用Canvas繪制圖形，文字學(xué)習(xí)目標(biāo) 通過實(shí)現(xiàn)HTML5繪制鐘表，學(xué)習(xí)Canvas標(biāo)簽的概念以及使用Canvas繪制圖形文字等技能。04了解網(wǎng)頁中圖形、圖片的繪制企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02 學(xué)習(xí)路徑 學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03 任務(wù)描述 01 情境導(dǎo)入 02 功能描述03 基本框架 04 開發(fā)環(huán)境 任務(wù)描述任務(wù)描述企業(yè)級卓越

2、人才培養(yǎng)（信息類專業(yè)集群） 情境導(dǎo)入情境導(dǎo)入 HTML5新增的Canvas元素可以讓用戶使用JavaScript在網(wǎng)頁上繪制圖像，從而使用HTML5新標(biāo)簽就可以做出豐富多彩的、炫目的界面和動畫。本次任務(wù)主要是使HTML5繪制鐘表。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群） 功能描述功能描述使用Canvas創(chuàng)建一個畫布 01 02使用JavaScript繪制出一個簡單地鐘表企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群） 基本框架基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）系統(tǒng)環(huán)境Windows 7系統(tǒng)及以上系統(tǒng)軟件環(huán)境服務(wù)器瀏覽器Sublime TextTomcat 7.0電腦端： 火狐瀏覽器 谷歌瀏覽器手機(jī)端

3、： Webkit內(nèi)核瀏覽器 Android手機(jī)內(nèi)置 瀏覽器 開發(fā)環(huán)境開發(fā)環(huán)境企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）04 任務(wù)技能任務(wù)技能 Canvas概述 Canvas繪制基本圖形繪制漸變圖形 繪制漸變圖形 圖形組合使用圖像任務(wù)技能任務(wù)技能 繪制文字 繪制變形圖形 使用圖像企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Canvas概述概述Canvas是HTML5中的一個新標(biāo)簽，Canvas標(biāo)簽主要是用于圖形繪制，在使用Canvas標(biāo)簽時通常需要定義三個屬性：id屬性、畫布高度和寬度。其中畫布大小的設(shè)置可以用CSS來定義，其默認(rèn)值是300px和150px。HTML代碼為：企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

4、建設(shè)制造強(qiáng)國1繪制直線2在使用canvas繪制圖形時首先要知道繪制圖形的起點(diǎn)，這就需要根據(jù)坐標(biāo)系來判斷坐標(biāo)的位置，默認(rèn)坐標(biāo)系是以畫布左上角（0,0）開始的，X向右增大，y向下增大。在默認(rèn)坐標(biāo)系中，每一個點(diǎn)的坐標(biāo)都是直接映射到一個CSS像素上。每個Canvas實(shí)例對象中都擁有一個path對象，創(chuàng)建自定義圖形的過程就是不斷對path對象操作的過程繪制繪制基本圖形基本圖形Canvas坐標(biāo)系方法和屬性功能moveTo(x,y)不繪制，只是將當(dāng)前位置移動到新目標(biāo)坐標(biāo)(x,y),并作為線條開始點(diǎn)lineTo(x,y)繪制線條到指定的目標(biāo)坐標(biāo)(x,y),并且在兩個坐標(biāo)之間畫一條直線，不管調(diào)用哪一個，都不會真

5、正畫出圖形，因?yàn)檫€沒有調(diào)用stroke(繪制)和fill(填充)函數(shù)，當(dāng)前，只是在定義路徑的位置，以便后面繪制時使用。strikeStyle屬性是指定線條的顏色lineWidth屬性設(shè)置線條的粗細(xì)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）3繪制圓形4在畫布中繪制矩形的方法在畫布中繪制圓形的方法繪制繪制基本基本圖形圖形繪制矩形方法描述fillRect繪制一個無邊框矩形，示例fillRect(0,0,150,75) 表示為左上角的坐標(biāo)為（0,0）長度為150寬度為75。strokeRect繪制一個帶邊框的矩形，該方法的四個參數(shù)和上面的相同。clearRect清除一個矩形區(qū)域，被清除的區(qū)域沒有任何線條。方

6、法描述beginPath()開始繪制路徑arc(x,y,radius,startAngle,endAngle,anticlockwise)X和y定義的是圓的中心，radius是圓的半徑，startAngle和endAngle是弧度，不是度數(shù)，anticlockwise用來定義所畫圓的方向，值是true或falseclosePath()結(jié)束路徑的繪制fill()進(jìn)行填充stroke()方法設(shè)置邊框企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）繪制文字繪制文字在畫布中繪制文字的方式和操作其他路徑對象的方式相同文本繪制功能由兩個方法組成方法描述fillText（text,x,y,maxwidth）繪制待fil

7、lStyle填充的文字，文字參數(shù)以及用于制動文本位置的坐標(biāo)的參數(shù)。Maxwidth是可選參數(shù)，用于限制字體大小，它會將文本字體強(qiáng)制收縮到指定的尺寸trokeText（text,x,y,maxwidth）繪制只有strokeStyle邊框的文字企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）1繪制徑向漸變2（1）創(chuàng)建漸變對象，var a=cxt.creatLinearGradient(0,0,0,canvas.height);（2）為漸變對象設(shè)置顏色，指明過渡方式，gradient.addColorStop(0,”#fff”);gradient.addColorStop(1,”#000”);（3）在cont

8、ext上為填充樣式或者描邊樣式設(shè)置漸變cxt.fillStyle=gradient;想繪制徑向漸變時需要創(chuàng)建漸變對象，可對文本，形狀進(jìn)行填充，語法為context.createRadialGradient(x0,y0,r0,x1,y1,r1);其中x0: 漸變的開始圓的 x 坐標(biāo)，y0: 漸變的開始圓的 y 坐標(biāo)，r0: 開始圓的半徑，x1: 漸變的結(jié)束圓的 x 坐標(biāo)，y1: 漸變的結(jié)束圓的 y 坐標(biāo)，r1: 結(jié)束圓的半徑。繪制漸變圖形繪制漸變圖形繪制線性漸變企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）1234Context對象中維持了一個保存當(dāng)前Canvas狀態(tài)信息的堆。Context對象提供了兩個

9、方法用于保存和恢復(fù)Canvas的狀態(tài)，其原型如下：void save(); void restore();狀態(tài)保存與恢復(fù)位移畫布圖形縮放 圖形旋轉(zhuǎn)程序中使用ctx.translate(x,y)方法進(jìn)行畫布的平移，其中x表示添加到水平坐標(biāo)（x）上的值，y表示添加到垂直坐標(biāo)（y）上的值，發(fā)生位移后，相當(dāng)于把畫布的0,0坐標(biāo) 更換到新的x,y的位置，所有繪制的新元素都被影響實(shí)現(xiàn)圖形的縮放使用scale(x,y)函數(shù)，該函數(shù)包含兩個參數(shù)，分別代表x，y兩個方向上的值使用context.rotate(angle)方法來旋轉(zhuǎn)圖像。rotate()方法默認(rèn)是從左上端的（0,0）開始旋轉(zhuǎn)，通過一個指 定 角

10、度 來 改 變 畫 布 的 坐 標(biāo) 和Canvas在瀏覽器中的映射繪制變形繪制變形圖形圖形企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）圖形組合圖形組合前面已經(jīng)講過將一個圖形畫在另一個圖形之上，本節(jié)主要介紹利用globalCompositeOperation屬性改變圖形的繪制順序企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）使用圖像使用圖像要在畫布Canvas上繪制圖像，首先需要準(zhǔn)備一張圖片，圖片可以通過HTML5或JS引入方法說明drawImage(image,dx,dy)接受一個圖片，并將之畫到canvas中。給出的坐標(biāo)(dx,dy)代表圖片的左上角位置。drawImage(image,dx,dy,dw,dh

11、)接受一個圖片，將其縮放，寬度為dw和高度為dh,然后把它畫到canvas上的(dx,dy)drawImage(image,sx,sy,sw,sy,dx,dy,dw,dh)接受一個圖片，通過參數(shù)(sx,sy,sw,sh)指定圖片剪裁的范圍，并縮放到(dw,dh)的大小，然后然后把它畫到canvas上的(dx,dy)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）05 任務(wù)實(shí)施第一步：在HTML中定義一個畫布canvas，設(shè)置畫布的寬度和高度第一步：繪制表盤中的數(shù)字，并在表盤中顯示刻度，刻度分大刻度和小刻度第二步：繪制鐘表的表針任務(wù)實(shí)施任務(wù)實(shí)施企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06 任務(wù)總結(jié)任務(wù)技能任務(wù)技能任務(wù)實(shí)施任務(wù)實(shí)施任務(wù)拓展任務(wù)拓展任務(wù)描述任務(wù)描述 通過本項(xiàng)目的學(xué)習(xí)，重點(diǎn)熟悉了HTML5中的標(biāo)簽、畫布與畫筆、坐標(biāo)與路徑、各種網(wǎng)頁圖形的繪制、圖片的繪制、陰影效果和顏色漸變效果的設(shè)置等，學(xué)會了