一、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. （四）Redis哈希表Hash操作

    Hash全部命令如下: hset key field value # 将哈希表key中的字段field的值设为value hget key field # 返回哈希表key中的字段field的值val ...

  2. c# 日志记录 行号

    Console.WriteLine(ex.Message); //通过如下代码来记录异常详细的信息 ); Console.WriteLine("文件名:{0},行号:{1},列号:{2}&q ...

  3. 【题解】APIO2018 Duathlon 铁人两项

    首先对于给出的图建立圆方树,然后我们分类讨论每一个点作为中间的中转站出现的情况有多少种,累积到 \(ans\) 中. 对于圆点:在任意两个子树内分别选出一个节点都是合法的. 对于方点:连接向方点的点均 ...

  4. LOJ6346：线段树：关于时间 ——题解

    https://loj.ac/problem/6346 题目还是没法粘贴…… 一道蛮不错的题. 老年选手困了30min后才想要推式子实在是太懒了…… 我们可以对每次更新列表看成系数*x即可. 举例:第 ...

  5. 差点AFO

    差点就AFO了,小伙伴们一定注意护眼啊. 眼睛总算是活过来了. 还有一个月联赛,加油

  6. Codeforces Round #402 (Div. 2) A B C sort D二分 (水)

    A. Pupils Redistribution time limit per test 1 second memory limit per test 256 megabytes input stan ...

  7. Educational Codeforces Round 6 A

    A. Professor GukiZ's Robot time limit per test 0.5 seconds memory limit per test 256 megabytes input ...

  8. DOM案例五星评分控件

    模仿网页上评分的五个五星. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  9. Leetcode 381. O(1) 时间插入、删除和获取随机元素 - 允许重复

    1.题目描述 设计一个支持在平均 时间复杂度 O(1) 下, 执行以下操作的数据结构. 注意: 允许出现重复元素. insert(val):向集合中插入元素 val. remove(val):当 va ...

  10. http中有关缓存相关的几个字段

    转载自:http://blog.csdn.net/lifeibo/article/details/5979572 Expires.Cache-Control.Last-Modified. ETag是R ...