一、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. Python 源码剖析（六）【内存管理机制】

    六.内存管理机制 1.内存管理架构 2.小块空间的内存池 3.循环引用的垃圾收集 4.python中的垃圾收集 1.内存管理架构 Python内存管理机制有两套实现,由编译符号PYMALLOC_DEB ...

  2. 【题解】Atcoder ARC#94 F-Normalization

    再次膜拜此强题!神级性质之不可能发现系列收藏++:首先,对于长度<=3的情况,我们采取爆搜答案(代码当中是打表).对于长度>=4的情况,则有如下几条玄妙的性质: 首先我们将 a, b, c ...

  3. hihoCoder#1838 : 鎕鎕鎕 贪心

    ---题面--- 题解: 神奇的贪心题,,,感觉每次做贪心题都无从下手... 我们首先按照a对所有卡片从小到大排序,然后从1开始,从连续的两张牌中取b最大的,最后一张单出来的也取了. 可以证明,这样的 ...

  4. Android 手势识别

    public class MyGesture extends SimpleOnGestureListener { private GestureDetector gd; // onGestureLis ...

  5. IDEA_MyBatis_SQLException：Parameter index out of range坑

    报错信息:超出数据库数据表设定的规定长度了 nested exception is org.apache.ibatis.type.TypeException: Could not set parame ...

  6. react设置默认state和默认props

    1.默认状态设置 1.constructor (ES6) constructor(props) { this.state = { n: ... } } 2.getInitialState (ES5) ...

  7. Random Numbers Gym - 101466K dfs序+线段树

    Tamref love random numbers, but he hates recurrent relations, Tamref thinks that mainstream random g ...

  8. spring cloud config的bootstrap.yml与application.proterties的区别

    bootstrap.yml  和application.yml  都可以用来配置参数 bootstrap.yml可以理解成系统级别的一些参数配置,这些参数一般是不会变动的 application.ym ...

  9. rm删除破折号 - 开头的文件

    解决这个问题的一个方法就是在要删除的文件的前边加上"./" # rm ./-slow_query_130103.txt.gz To remove a file whose name ...

  10. CodeVS 1017 DP

    1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描 ...