一、SVG

1、svg与canvas的区别

  • canvas绘制的是位图，svg绘制的是矢量图
  • canvas使用JavaScript绘制，svg使用xml绘制
  • canvas不能给每个图形绑定事件，svg可以给每个图形绑定事件
  • canvas适合游戏等频繁操作的应用，svg适合图标
  • canvas需要支持H5标准的浏览器，svg的兼容到IE6

2、在html中使用svg

  • <embed引入>

      <embed src="circle1.svg" type="image/svg+xml" />

  • <object>引入

      <object data="circle1.svg" type="image/svg+xml"></object>

  • <iframe>引入

      <iframe src="circle1.svg"></iframe>

  • 直接嵌入

3、svg绘制图形

二、触摸屏事件

1、事件类型

  • touchstart 开始触摸
  • touchmove 触摸移动
  • touchend 结束触摸

2、touchEvent对象

  • touches

      <!DOCTYPE html>
    
  <html lang="en">
    
  <head>
    
  	<meta charset="UTF-8">
    
  	<title>触摸屏绘制</title>
    
  	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
  	<style>
    
  		html{
    
  			overflow:hidden;
    
  		}
    
  		body{
    
  			margin:0;
    
  		}
    
  		canvas{
    
  			background:#333;
    
  		}
    
  	</style>
    
  </head>
    
  <body>
    
  	<canvas id="myCanvas"></canvas>
    
  	<script>
    
  		(function(){
    
  			var canvas=document.getElementById("myCanvas");
    
  			canvas.width=window.innerWidth;
    
  			canvas.height=window.innerHeight;
    
  			var ctx=canvas.getContext("2d");
    
  			canvas.addEventListener("touchstart",touchStartCall,false);
    
  			canvas.addEventListener("touched",touchEndCall,false);

  			function touchStartCall (event){
    
  				canvas.addEventListener("touchmove",touchMoveCall,false);
    
  				var x=event.touches[0].clientX;
    
  				var y=event.touches[0].clientY;
    
  				ctx.beginPath();
    
  				ctx.moveTo(x,y);
    
  				event.preventDefault();
    
  			}
    
  			function touchMoveCall (event){
    
  				var x=event.touches[0].clientX;
    
  				var y=event.touches[0].clientY;
    
  				ctx.lineTo(x,y);

  				ctx.strokeStyle="#fff";
    
  				ctx.lineWidth=2;
    
  				ctx.stroke();

  				event.preventDefault();

  			}
    
  			function touchEndCall(){
    
  				canvas.removeEventListener("touchmove",touchMoveCall,false);
    
  			}
    
  		})()
    
  	</script>
    
  </body>
    
  </html>

3、touchList对象

4、touch对象

  • clientX
  • clientY
  • pageX
  • pageY
  • scrollX
  • scrollY

三、事件类型

鼠标事件

键盘事件

文档事件

图片事件

表单事件

其他事件

四、H5新增事件类型

1、拖放事件 dragEvent

2、多媒体事件 mediaEvent

3、progress progerssEvent

4、触摸屏事件 touchEvent

5、window事件

6、Form事件

7、Mouse事件

8、其他事件

HTML5API(5)的更多相关文章

  1. HTML5入门总结 HTML5API

    w3cshools  MDN英文  MDN中文 HTML5 HTML5 is the latest evolution of the standard that defines HTML. The t ...

  2. HTML5API之获取地理位置详解

    在使用地理位置API之前先来了解一下什么是经度和纬度以及地理位置获取的原理 首先经度指的是南北极的连接线,纬度指的是东西的连接线 地理位置的获取原理是通过IP地址(基于ISP记录,能够知道这个IP地址 ...

  3. 山寨HTML5API classList类

    preface 认为自己去写一些类,你真的会找到自己不足的地方.事实上厉害不是你实现一个类.而是你怎样去设计一个类,能让开发人员更加easy操作. 对于这个操作样式,能够通过javascript訪问s ...

  4. HTML5API(4)

    十三.服务器推送 服务器主动向客户端推送信息 传统的HTTP协议传输,服务器是被动相应客户端的请求 1.解决方案 ajax轮询.ajax长轮询 Server-Send-Event WebSocket ...

  5. HTML5API(3)

    十一.ajax同源操作 URL说明是否允许通信 同一域名下允许 http://www.a.com/a.js , http://www.a.com/b.js 同一域名下不同文件夹允许 http://ww ...

  6. HTML5API（2）

    四.文件API 1.概述 H5允许JS有条件的读取客户端文件 允许读取的文件:1.待上传的文件2.拖进浏览器的文件 多文件上传设置属性multiple 过滤上传文件类型 设置accept属性 acce ...

  7. HTML5API

    H5新API 一.地理位置API 1.navigator.geolocation对象 getCurrentPosition(callback,errCallback,options)获取当前位置 wa ...

  8. 浏览器桌面通知Notification探究

    首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...

  9. 利用javascript和WebGL绘制地球 【翻译】

    利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...

随机推荐

  1. hdu 3367 Pseudoforest (最小生成树)

    Pseudoforest Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...

  2. hadoop 使用Avro排序

    在上例中,使用Avro框架求出数据的最大值,本例使用Avro对数据排序,输入依然是之前的样本,输出使用文本(也可以输出Avro格式). 1.在Avro的Schema中直接设置排序方向. dataRec ...

  3. 【题解】Atcoder ARC#97 F-Monochrome Cat

    好zz啊我……(:д:) 首先我们可以删掉所有只有黑色节点的子树(一定不会遍历到), 且注意到每一个点你一定只会经过一遍.然后又考虑如果起点和终点相同,那么总次数实际上已经固定了:就是遍历整棵树(每一 ...

  4. POJ 2774 求两个串的最长公共前缀 | 后缀数组

    #include<cstdio> #include<algorithm> #include<cstring> #define N 200005 using name ...

  5. oracle行转列函数WMSYS.WM_CONCAT 用法

    1.通过 10g 所提供的 WMSYS.WM_CONCAT 函数即可以完成 行转列的效果 select group_code, wm_concat(display_title) from DR_OPM ...

  6. MySQL5.7 添加、删除用户与授权

    mysql -uroot -proot 例子: 创建用户mysql> CREATE USER 'xiaoyaoji'@'%' IDENTIFIED BY 'xiaoyaoji';Query OK ...

  7. 背景建模技术（七）：预处理（PreProcessor）模块

    预处理(PreProcessor)模块是BgsLibrary中一个必选的模块,是真正进入背景建模算法的“预处理”过程,其主要功能包括‘去模糊’.‘获得灰度图’.'应用Canny算子‘等可选模块. 下面 ...

  8. java.lang包学习（转自微学苑）

    Java语言包(java.lang)定义了Java中的大多数基本类,由Java语言自动调用,不需要显示声明.该包中包含了Object类,Object类是整个类层次结构的根结点,同时还定义了基本数据类型 ...

  9. [ssh]ssh系列之一

    1.使用ssh建立sock代理 ssh -D 7070 -f -N user@host -D -f 后台执行 -N 不登陆shell执行

  10. Spring Filter过滤器,Spring拦截未登录用户权限限制

    转载自:http://pouyang.iteye.com/blog/695429 实现的功能:判断用户是否已登录,未登录用户禁止访问任何页面或action,自动跳转到登录页面.  比较好的做法是不管什 ...