項目七使用HTML5繪制鐘表企業級卓越人才培養（信息類專業集群）目錄01學習目標02學習路徑03任務描述04任務技能05任務實施06任務總結01學習目標

學習目標010203了解Canvas了解陰影效果和顏色漸變效果的設置掌握使用Canvas繪制圖形，文字學習目標

通過實現HTML5繪制鐘表，學習Canvas標簽的概念以及使用Canvas繪制圖形文字等技能。04了解網頁中圖形、圖片的繪制企業級卓越人才培養（信息類專業集群）02學習路徑

學習路徑企業級卓越人才培養（信息類專業集群）03任務描述

01情境導入

02功能描述03

基本框架

04開發環境

任務描述企業級卓越人才培養（信息類專業集群）

情境導入HTML5新增的Canvas元素可以讓用戶使用JavaScript在網頁上繪制圖像，從而使用HTML5新標簽就可以做出豐富多彩的、炫目的界面和動畫。本次任務主要是使HTML5繪制鐘表。企業級卓越人才培養（信息類專業集群）

功能描述使用Canvas創建一個畫布

01

02使用JavaScript繪制出一個簡單地鐘表企業級卓越人才培養（信息類專業集群）

基本框架企業級卓越人才培養（信息類專業集群）系統環境Windows7系統及以上系統軟件環境服務器瀏覽器Sublime

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

谷歌瀏覽器手機端：Webkit內核瀏覽器

Android手機內置

瀏覽器

開發環境企業級卓越人才培養（信息類專業集群）04任務技能任務技能

Canvas概述

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

繪制漸變圖形

圖形組合使用圖像任務技能

繪制文字

繪制變形圖形

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

voidrestore();狀態保存與恢復位移畫布圖形縮放圖形旋轉程序中使用ctx.translate(x,y)方法進行畫布的平移，其中x表示添加到水平坐標（x）上的值，y表示添加到垂直坐標（y）上的值，發生位移后，相當于把畫布的0,0坐標更換到新的x,y的位置，所有繪制的新元素都被影響實現圖形的縮放使用scale(x,y)函數，該函數包含兩個參數，分別代表x，y兩個方向上的值使用context.rotate(angle)方法來旋轉圖像。rotate()方法默認是從左上端的（0,0）開始旋轉，通過一個指定角度來改變畫布的坐標和Canvas在瀏覽器中的映射繪制變形圖形企業級卓越人才培養（信息類專業集群）圖形組合前面已經講過將一個圖形畫在另一個圖形之上，本節主要介紹利用globalCompositeOperation屬性改變圖形的繪制順序企業級卓越人才培養（信息類專業集群）使用圖像要在畫布Canvas上繪制圖像，首先需要準備一張圖片，圖片可以通過HTML5或JS引入方法說明drawImage(image,dx,dy)接受一個圖片，并將之畫到canvas中。給出的坐標(dx,dy)代表圖片的左上角位置。drawImage(image,dx,dy,dw,dh)接受一個圖片，將其縮放，寬度為dw和高度為dh,然后把它畫到canvas上的(dx,dy)drawImage(image,sx,sy,sw,sy,dx,dy,dw,dh)接受一個圖片，通過參數(sx,sy,sw,sh)指定圖片剪裁的范圍，并縮放到(dw,dh)的大小，然后然后把它畫到canvas上的(dx,dy)企業級卓越人才培養（信息類專業集群）05任務實施第一步：在HTML中定義一個畫布canvas，設置畫布的寬度和高度第一步：繪制表盤中的數字，并在表盤中顯示刻度，刻度分大刻度和小刻度第二步：繪制鐘表的表針任務實施企業級卓越人才培養（信息類專業集群）06任務總結任務技能任務實施任務拓展任務描述

通過本項目的學習，重點熟悉了HTML5中的<canvas>標簽、畫布與畫筆、坐標與路徑、各種網頁圖形的繪制、圖片的繪制、陰影效果和顏色漸變效果的設置等，學會了應用<canvas>標簽以及相關屬性和方法進行網頁圖形繪制與游戲設計的方法。

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