Web前端開發(fā)實例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 課件 第10章 HTML5的API應用

高等學校規(guī)劃教材Web前端開發(fā)實例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第10章HTML5的API應用目錄10.1拖放API10.2繪圖API10.1拖放API10.1.1draggable屬性10.1.2拖放事件10.1.3數(shù)據(jù)傳遞對象dataTransfer10.1.1draggable屬性 draggable屬性設(shè)置元素是否可以被拖放，該屬性有兩個值：true和false，默認為false，當值為true時表示元素選中之后可以拖放，否則不能拖放。 例如，設(shè)置一張圖片可以被拖放，代碼為：<imgsrc="images/logo.jpg"border="1"draggable="true"> draggable屬性設(shè)置為true時僅表示該元素允許拖放，但并不能真正實現(xiàn)拖放，必須與JavaScript腳本結(jié)合使用才能實現(xiàn)拖放。10.1.2拖放事件 1．拖放元素事件 事件對象為被拖放元素，拖放元素事件如表10-1所示。10.1.2拖放事件 2．目標元素事件 事件對象為目標元素，目標元素事件如表10-2所示。10.1.2拖放事件 3．拖放事件的生命周期和執(zhí)行過程 從用戶在元素上單擊鼠標左鍵開始拖放行為，到將該元素放置到指定的目標區(qū)域中，每個事件的生命周期如表10-3所示。10.1.3數(shù)據(jù)傳遞對象dataTransfer dataTransfer對象用于從被拖放元素向目標元素傳遞數(shù)據(jù)，提供了許多屬性和方法。【例10-1】拖放示例。用戶拖動頁面中圖片放置到目標矩形中。10.2繪圖API10.2.1創(chuàng)建canvas元素10.2.2構(gòu)建繪圖環(huán)境10.2.3繪制圖形的步驟10.2.4繪制圖形10.2.1創(chuàng)建canvas元素 canvas元素的主要屬性是畫布寬度屬性width和高度屬性height，單位是像素。向頁面中添加canvas元素的語法格式為：<canvasid="畫布標識"width="畫布寬度"height="畫布高度">…</canvas> 如果不指定width和height屬性值，則默認的畫布寬度為300像素，高度為150像素。10.2.2構(gòu)建繪圖環(huán)境 大多數(shù)canvas繪圖API都沒有定義在canvas元素本身上，而是定義在通過畫布的getContext()方法獲得的一個“繪圖環(huán)境”對象上。getContext()方法返回一個用于在畫布上繪圖的環(huán)境。其語法格式為：canvas.getContext(contextID)10.2.2構(gòu)建繪圖環(huán)境 getContext("2d")對象的屬性和方法，可用于畫布上繪制文本、線條、矩形、圓形等。顏色、樣式和陰影屬性如表10-6所示。10.2.2構(gòu)建繪圖環(huán)境 渲染上下文對象的常用方法如表10-7所示。10.2.3繪制圖形的步驟 在創(chuàng)建的canvas上，通過JavaScript繪制圖形的步驟如下。 1）創(chuàng)建canvas對象。

2）創(chuàng)建context對象，如下面的代碼：varctx=c.getContext("2d"); 3）繪制圖形。調(diào)用context對象的屬性和方法，繪制圖形。10.2.4繪制圖形 1．繪制矩形 （1）繪制填充的矩形 fillRect()方法用來繪制填充的矩形，語法格式為：fillRect(x,y,weight,height); （2）繪制矩形輪廓 strokeRect()方法用來繪制矩形的輪廓，語法格式為：strokeRect(x,y,weight,height);10.2.4繪制圖形 【例10-2】繪制填充的矩形和矩形輪廓。10.2.4繪制圖形 【例10-3】繪制填充的矩形和矩形輪廓。10.2.4繪制圖形

2．繪制路徑

（1）lineTo()方法

lineTo()方法用來繪制一條直線，語法格式為：lineTo(x,y)

（2）moveTo()方法

在繪制直線時，通常配合moveTo()方法設(shè)置繪制直線的當前位置并開始一條新的子路徑，語法格式為：moveTo(x,y)10.2.4繪制圖形

（3）繪制路徑封閉的圖形

當用戶需要繪制一個路徑封閉的圖形時，需要使用beginPath()方法初始化繪制路徑和closePath()方法標記路徑繪制操作結(jié)束。beginPath()方法的語法格式為：beginPath()closePath()方法的語法格式為：closePath()10.2.4繪制圖形

【例10-4】繪制路徑。10.2.4繪制圖形

3．繪制圓弧或圓

arc()方法使用一個中心點和半徑，為一個畫布的當前子路徑添加一條弧，語法格式為：arc(x,y,radius,startAngle,endAngle,counterclockwise)其中的參數(shù)含義如下。

x,y：描述弧的圓形的圓心坐標。

radius：描述弧的圓形的半徑。10.2.4繪制圖形

4．繪制文字

（1）繪制填充文字

fillText()方法用于以填充方式繪制字符串，語法格式為：fillText(text,x,y,[maxWidth])

（2）繪制輪廓文字

strokeText()方法用于輪廓方式繪制字符串，語法格式為：strokeText(text,x,y,[maxWidth])10.2.4繪制圖形

【例10-6】繪制填充文字和輪廓文字。10.2.4繪制圖形

5．繪制漸變

（1）繪制線性漸變

createLinearGradient()方法用于創(chuàng)建一條線性顏色漸變：createLinearGradient(xStart,yStart,xEnd,yEnd)

（2）繪制徑向漸變createRadialGradient()方法用于創(chuàng)建一條放射顏色漸變：createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)10.2.4繪制圖形

【例10-7】繪制線性漸變和徑向漸變。10.2.4繪制圖形

6．繪制圖像

使用drawImage()方法在一個畫布上繪制圖像，格式如下。格式一：drawImage(image,x,y)格式二：drawImage(image,x,y,width,height)格式三：drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)10.2.4繪制圖形

【例10-8】繪制圖像。頁面中依次繪制了5幅圖像，分別實現(xiàn)了原圖使繪制、圖像縮小、圖像裁剪、裁剪區(qū)域的放大和裁剪區(qū)域的縮小效果。習題101．使用