《HTML5與CSS3項目實戰(zhàn)》課件-CORE07

項目七使用HTML5繪制鐘表企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01學(xué)習(xí)目標(biāo)02學(xué)習(xí)路徑03任務(wù)描述04任務(wù)技能05任務(wù)實施06任務(wù)總結(jié)01學(xué)習(xí)目標(biāo)

學(xué)習(xí)目標(biāo)010203了解Canvas了解陰影效果和顏色漸變效果的設(shè)置掌握使用Canvas繪制圖形，文字學(xué)習(xí)目標(biāo)

通過實現(xiàn)HTML5繪制鐘表，學(xué)習(xí)Canvas標(biāo)簽的概念以及使用Canvas繪制圖形文字等技能。04了解網(wǎng)頁中圖形、圖片的繪制企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學(xué)習(xí)路徑

學(xué)習(xí)路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03任務(wù)描述

01情境導(dǎo)入

02功能描述03

基本框架

04開發(fā)環(huán)境

任務(wù)描述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

情境導(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)境Windows7系統(tǒng)及以上系統(tǒng)軟件環(huán)境服務(wù)器瀏覽器Sublime

TextTomcat7.0電腦端：火狐瀏覽器

谷歌瀏覽器手機端：Webkit內(nèi)核瀏覽器

Android手機內(nèi)置

瀏覽器

開發(fā)環(huán)境企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）04任務(wù)技能任務(wù)技能

Canvas概述

Canvas繪制基本圖形繪制漸變圖形

繪制漸變圖形

圖形組合使用圖像任務(wù)技能

繪制文字

繪制變形圖形

使用圖像企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Canvas概述Canvas是HTML5中的一個新標(biāo)簽，Canvas標(biāo)簽主要是用于圖形繪制，在使用Canvas標(biāo)簽時通常需要定義三個屬性：id屬性、畫布高度和寬度。其中畫布大小的設(shè)置可以用CSS來定義，其默認(rèn)值是300px和150px。HTML代碼為：<canvasid="mycanvas"height="200"width="200">企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）建設(shè)制造強國1繪制直線2在使用canvas繪制圖形時首先要知道繪制圖形的起點，這就需要根據(jù)坐標(biāo)系來判斷坐標(biāo)的位置，默認(rèn)坐標(biāo)系是以畫布左上角（0,0）開始的，X向右增大，y向下增大。在默認(rèn)坐標(biāo)系中，每一個點的坐標(biāo)都是直接映射到一個CSS像素上。每個Canvas實例對象中都擁有一個path對象，創(chuàng)建自定義圖形的過程就是不斷對path對象操作的過程繪制基本圖形Canvas坐標(biāo)系方法和屬性功能moveTo(x,y)不繪制，只是將當(dāng)前位置移動到新目標(biāo)坐標(biāo)(x,y),并作為線條開始點lineTo(x,y)繪制線條到指定的目標(biāo)坐標(biāo)(x,y),并且在兩個坐標(biāo)之間畫一條直線，不管調(diào)用哪一個，都不會真正畫出圖形，因為還沒有調(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ū)域沒有任何線條。方法描述beginPath()開始繪制路徑arc(x,y,radius,startAngle,endAngle,anticlockwise)X和y定義的是圓的中心，radius是圓的半徑，startAngle和endAngle是弧度，不是度數(shù)，anticlockwise用來定義所畫圓的方向，值是true或falseclosePath()結(jié)束路徑的繪制fill()進行填充stroke()方法設(shè)置邊框企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）繪制文字在畫布中繪制文字的方式和操作其他路徑對象的方式相同文本繪制功能由兩個方法組成方法描述fillText（text,x,y,maxwidth）繪制待fillStyle填充的文字，文字參數(shù)以及用于制動文本位置的坐標(biāo)的參數(shù)。Maxwidth是可選參數(shù)，用于限制字體大小，它會將文本字體強制收縮到指定的尺寸trokeText（text,x,y,maxwidth）繪制只有strokeStyle邊框的文字企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）1繪制徑向漸變2（1）創(chuàng)建漸變對象，vara=cxt.creatLinearGradient(0,0,0,canvas.height);（2）為漸變對象設(shè)置顏色，指明過渡方式，gradient.addColorStop(0,”#fff”);gradient.addColorStop(1,”#000”);（3）在context上為填充樣式或者描邊樣式設(shè)置漸變cxt.fillStyle=gradient;想繪制徑向漸變時需要創(chuàng)建漸變對象，可對文本，形狀進行填充，語法為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對象提供了兩個方法用于保存和恢復(fù)Canvas的狀態(tài)，其原型如下：voidsave();

voidrestore();狀態(tài)保存與恢復(fù)位移畫布圖形縮放圖形旋轉(zhuǎn)程序中使用ctx.translate(x,y)方法進行畫布的平移，其中x表示添加到水平坐標(biāo)（x）上的值，y表示添加到垂直坐標(biāo)（y）上的值，發(fā)生位移后，相當(dāng)于把畫布的0,0坐標(biāo)更換到新的x,y的位置，所有繪制的新元素都被影響實現(xiàn)圖形的縮放使用scale(x,y)函數(shù)，該函數(shù)包含兩個參數(shù)，分別代表x，y兩個方向上的值使用context.rotate(angle)方法來旋轉(zhuǎn)圖像。rotate()方法默認(rèn)是從左上端的（0,0）開始旋轉(zhuǎn)，通過一個指定角度來改變畫布的坐標(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)接受一個圖片，將其縮放，寬度為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ù)實施第一步：在HTML中定義一個畫布canvas，設(shè)置畫布的寬度和高度第一步：繪制表盤中的數(shù)字，并在表盤中顯示刻度，刻度分大刻度和小刻度第二步：繪制鐘表的表針任務(wù)實施企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)拓展任務(wù)描述

通過本項目的學(xué)習(xí)，重點熟悉了HTML5中的<canvas>標(biāo)簽、畫布與畫筆、坐標(biāo)與路徑、各種網(wǎng)頁圖形的繪制、圖片的繪制、陰影效果和顏色漸變效果的設(shè)置等，學(xué)會了應(yīng)用<canvas>標(biāo)簽以及相關(guān)屬性和方法進行網(wǎng)頁圖形繪制與游戲設(shè)計的方法。

任務(wù)總結(jié)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）謝謝觀賞PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT