码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 5

时间:2017-07-18 13:30:43      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:fse   div   绘图   containe   pop   自己的   地图   转移   练习   

复习:

HTML5新特性

1.新的语义标签

2.表单2.0

3.视频和音频

4.Canvas绘图

5.SVG绘图

6.地理定位

7.拖放API

8.WebWorker

9.WebStorage

10.WebSocket

 

SVG的使用:

<svg width="" height="">

  绘制矩形

  <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>

       <linearGradient id="g3" x1="" 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 id="f1">

              <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

标签:fse   div   绘图   containe   pop   自己的   地图   转移   练习   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!