HTML5 5

時間 2019-11-09

標籤 html5 html 欄目 HTML5 简体版

原文原文鏈接

複習：php

HTML5新特性前端

1.新的語義標籤git

2.表單2.0web

3.視頻和音頻canvas

4.Canvas繪圖api

5.SVG繪圖瀏覽器

6.地理定位jsp

7.拖放APIsvg

8.WebWorker工具

9.WebStorage

10.WebSocket

SVG的使用：

繪製矩形

繪製圓形

繪製橢圓

繪製直線

繪製折線

繪製多邊形

繪製文本

繪製圖像

貝塞爾路徑

特效對象

<defs>

</linearGradient>

</defs>

</svg>

今日目標：

(1)補充：SVG相關小知識點

(2)地理定位——掌握

(3)拖放API——重點&小難點

1.SVG中定義特效對象——漸變特效

2.SVG中定義特效對象——濾鏡(filter)——高斯模糊路徑

<defs>

</filter>

</defs>

更多濾鏡效果及使用方法：

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

前端領域中可用的繪圖技術：

(1)Canvas —— 2D位圖

(2)SVG —— 2D矢量圖

(3)WebGL —— 2D/3D圖

繪製統計圖，能夠選用上述任意一種！但三種技術可供調用的代碼不同！

3.第三方繪圖工具庫——Two.js —— 瞭解&重點在自學過程

(1)看官網，找介紹

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

提供了一套統一的接口，可用於在svg、canvas、webgl中實現常見圖形的繪製，如矩形、三角形、圓形.....

不足：爲了兼容三種技術，必須捨棄某個技術所專有的效果；效率上有待提升。

(2)找示例，寫Demo

(3)查API Document，在項目中加以應用

4.HTML5新特性之六——地理定位

地理定位：使用JS獲取瀏覽器當前所在的地理座標，實現LBS（Location Based Service，基於定位的服務），具體數據包括：

經度：longitude

緯度：latitude

海拔：altitude

速度：speed

技術上如何獲取瀏覽器所在的定位信息：

(1)手機中的瀏覽器

靠手機內置的GPS芯片數據，精度在「米」級

靠手機與之通信基站數據，精度在「千米」級

(2)PC中的瀏覽器

靠IP地址反向解析，精度在「千米」級

HTML5新增了用於獲取瀏覽器所在定位的對象：

window.navigator.geolocation {

getCurrentPosition: fn 用於獲取當前定位信息

watchPosition: fn 不停的監視定位信息的改變

clearWatch: fn 清除監視

}

------------------------------------

navigator.geolocation.getCurrentPosition(

funcntion(pos){

console.log('定位成功');

}, function(err){

console.log('定位失敗');

}

)

5.如何在頁面中使用百度地圖 —— 擴展小知識

從map.baidu.com下點擊「地圖開放平臺」：

目前官網： http://lbsyun.baidu.com/

JS-API使用手冊： http://lbsyun.baidu.com/index.php?title=jspopular

第三方工具的學習步驟：

(1)打開官網，找定義，功能說明

http://lbsyun.baidu.com/

能夠基於百度地圖進行Android、iOS、Web應用開發

http://lbsyun.baidu.com/index.php?title=jspopular

(2)找示例程序

(3)找API文檔，編寫本身的應用

使用百度地圖API步驟：

(1)註冊百度開發者帳號

(2)使用開發者帳號申請建立一個Web應用帳號，獲取一個訪問百度地圖的密鑰（AccessKey）

http://lbsyun.baidu.com/apiconsole/key

(3)編寫HTML網頁，出示當前網站的訪問密鑰，調用百度地圖API

</script>

//建立地圖實例

var map = new BMap.Map("container");

//建立一個指定的點 —— 文博大廈

var p = new BMap.Point(116.300982,39.915907);

//以指定點爲中心顯示地圖

map.centerAndZoom(p, 17);

6.HTML5新特性之七 —— 拖放API —— 重點&小難點

Drag：拖動

Drop：釋放

在HTML5以前只能使用鼠標事件模擬出「拖放」效果；HTML5專門爲拖放提供了7個事件句柄。

(1)拖動的源對象(source)能夠觸發的事件：

dragstart：拖動開始

drag：拖動進行中

dragend：拖動結束

源對象的拖動過程：dragstart x 1 + drag x n + dragend x 1

練習：實現一個能夠隨着鼠標拖動而移動的小飛機

(2)拖動的目標對象(target)能夠觸發的事件：

dragenter：拖動着進入

dragover：拖動着在目標對象上方

dragleave：拖動着離開

drop：鬆手/釋放/鬆開

目標對象的進入/離開過程：

dragenter x 1 + dragover x n + dragleave x 1

目標對象的進入/釋放過程：

dragenter x 1 + dragover x n + drop x 1

注意：必須阻止dragover的默認行爲！不然drop事件沒法觸發！

練習：

(1)垃圾桶初始時半透明；拖動小飛機進入垃圾桶變爲不透明，離開後從新半透明，在垃圾桶上方鬆手也變爲半透明。

提示：須要用到目標對象的四個事件

(2)一個垃圾桶，下方有一個容器(div#container)，其中有三個小飛機，拖動某個小飛機到垃圾桶上方，則容器中刪除此小飛機

提示：須要用到源對象和目標對象的多個事件

7.如何在拖動的源對象和目標對象間傳遞數據

如何在7個事件間傳遞數據？

源對象事件——3個：

目標對象事件——4個：

(1)方法一：使用全局變量 —— 全局對象污染

(2)方法二：使用拖放事件對象的dataTransfer屬性

說明：dataTransfer，用做數據傳遞/轉移，看做「拖拉機」

源對象觸發事件時保存k-v數據：

src.onxxx = function(e){

e.dataTransfer.setData( 'key', 'value' );

}

目標對象觸發事件時獲取k-v數據：

target.onxxx = function(e){

var value = e.dataTransfer.getData( 'key' )

}

課後練習：英雄選擇

要求：

拖動某架飛機到目標區域，則在上方顯示出該飛機；下方該飛機圖消失；替換選中區域已有的飛機。

拖動另外一架飛機到目標區域，則顯示出該飛機，以前選中的飛機變爲從新回到待選區域。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。