一、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. BZOJ4152 AMPPZ2014 The Captain（最短路）

    事实上每次走到横坐标或纵坐标最接近的点一定可以取得最优方案.于是这样连边跑最短路就可以了. #include<iostream> #include<cstdio> #inclu ...

  2. [洛谷P4345][SHOI2015]超能粒子炮·改

    题目大意:给你$n,k$,求:$$\sum\limits_{i=0}^k\binom n i\pmod{2333}$$题解:令$p=2333,f(n,k)\equiv\sum\limits_{i=0} ...

  3. harbor1.4.0高可用部署

    一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数成为 Children 的方法,然 ...

  4. LOJ6368：请让本题永远沉睡于此——题解

    https://loj.ac/problem/6368 给一个分数,求对p=1e9+7取模的值. 给高一同学出的毒瘤模拟题,正好试试给loj传题,竟然过审了,虽然个人觉得很水,但是考试情况来看仅有一人 ...

  5. 洛谷 P2617 Dynamic Rankings 解题报告

    P2617 Dynamic Rankings 题目描述 给定一个含有\(n\)个数的序列\(a[1],a[2],a[3],\dots,a[n]\),程序必须回答这样的询问:对于给定的\(i,j,k\) ...

  6. UVA.839 Not so Mobile ( 二叉树 DFS)

    UVA.839 Not so Mobile ( 二叉树 DFS) 题意分析 给出一份天平,判断天平是否平衡. 一开始使用的是保存每个节点,节点存储着两边的质量和距离,但是一直是Runtime erro ...

  7. 1 Easy Read/Write Splitting with PHP’s MySQLnd

    以下均是使用翻译软件翻译的! Note: This is part one in our Extending MySQL with PHP's MySQLnd Series, read part 2 ...

  8. [CEOI2017]Mousetrap

    P4654 [CEOI2017]Mousetrap 博弈论既视感 身临其境感受耗子和管理的心理历程. 以陷阱为根考虑.就要把耗子赶到根部. 首先一定有解. 作为耗子,为了拖延时间,必然会找到一个子树往 ...

  9. LOJ 模拟赛

    1.LOJ 507 接竹竿 link dp[i]表示前i个的最大分数,所以dp[i]=max(dp[i-1],dp[j-1]+sum[i]-sum[j-1])   (color i ==color j ...

  10. 【线段树】【P3740】 [HAOI2014]贴海报

    传送门 Description Bytetown城市要进行市长竞选,所有的选民可以畅所欲言地对竞选市长的候选人发表言论.为了统一管理,城市委员会为选民准备了一个张贴海报的electoral墙. 张贴规 ...