menu
more_vert
HTML5 5

作者:dayu

绘制矩形

<rect width="" height="" x="" y=""></rect>

绘制圆形

<circle r="" cx="" cy=""></circle>

绘制椭圆

<ellipse rx="" ry="" cx="" cy=""></ellipse>

绘制直线

<line x1="" y1="" x2="" y2="" stroke=""></line>

绘制折线

<polyline points="x1,y1 x2,y2 x3,y3 ... "></polyline>

绘制多边形

<polygon points="x1,y1 x2,y2 x3,y3 ..." ></polygon>

绘制文本

<text x="" y="" font-size="" fill="url(#g3)">文本</text>

绘制图像

<image xlink:href="" width="" height=""></image>

贝塞尔路径

<path points=""></path>

特效对象

<defs>

<linearGradientx1="" y1="" x2="" y2="">

<stop offset="" stop-color="" stop-opacity=""></stop>

<stop offset="" stop-color="" stop-opacity=""></stop>

</linearGradient>

</defs>

</svg>

今日目标:

(1)补充:SVG相关小知识点

(2)地理定位——掌握

(3)拖放API——重点&小难点

1.SVG中定义特效对象——渐变特效

2.SVG中定义特效对象——滤镜(filter)——高斯模糊路径

<defs>

<filter>

<feGaussionBlur stdDeviation="3">

</filter>

</defs>

<text filter="url(#f1)">

更多滤镜效果及使用方法:

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 src="http://api.map.baidu.com/api?v=2.0&ak=您的网站在百度地图申请的访问秘钥 ">

</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‘ )

}

课后练习: 英雄选择

要求:

拖动某架飞机到目标区域,则在上方显示出该飞机;下方该飞机图消失;替换选中区域已有的飞机。

拖动另一架飞机到目标区域,则显示出该飞机,之前选中的飞机变为重新回到待选区域。

HTML5 5

原文地址:http://www.cnblogs.com/Hale-Proh/p/7199836.html