一、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. CentOS7 从查看、启动、停止服务说起systemctl

    执行命令“systemctl status 服务名.service”可查看服务的运行状态,其中服务名后的.service 可以省略,这是CenOS7以后采用systemd作为初始化进程后产生的变化. ...

  2. [CF1060F]Shrinking Tree

    description codeforces 给一棵\(n\)个节点的树,每次等概率选择树中剩下边的一条进行缩边,这条边的两个端点有相同的概率被保留,求最后每个点被留下的概率. data range ...

  3. [洛谷P4721]【模板】分治 FFT

    题目大意:给定长度为$n-1$的数组$g_{[1,n)}$,求$f_{[0,n)}$,要求: $$f_i=\sum_{j=1}^if_{i-j}g_j\\f_0=1$$ 题解:直接求复杂度是$O(n^ ...

  4. [USACO06NOV]玉米田Corn Fields 状压DP

    题面: 农场主John新买了一块长方形的新牧场,这块牧场被划分成M行N列(1 ≤ M ≤ 12; 1 ≤ N ≤ 12),每一格都是一块正方形的土地.John打算在牧场上的某几格里种上美味的草,供他的 ...

  5. spring任务执行器与任务调度器(TaskExecutor And TaskScheduler)

    对于多线程及周期性调度相关的操作,spring框架提供了TaskExecutor和TaskScheduler接口为异步执行和任务调度.并提供了相关实现类给开发者使用.(只记录采用注解的使用形式,对于X ...

  6. Android Service 生命周期

    Service概念及用途: Android中的服务,它与Activity不同,它是不能与用户交互的,不能自己启动的,运行在后台的程序,如果我们退出应用时,Service进程并没有结束,它仍然在后台运行 ...

  7. BZOJ4568：[SCOI2016]幸运数字——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4568 https://www.luogu.org/problemnew/show/P3292 A ...

  8. Leetcode 138. 复制带随机指针的链表

    1.题目要求 给定一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点. 要求返回这个链表的深度拷贝. 2.解题思路 (1)笔试思路(求速度,拿分数):使用哈希表 /* ...

  9. Python os.walk文件遍历

    os.walk(top, topdown=True, onerror=None, followlinks=False) 可以得到一个三元tupple(dirpath, dirnames, filena ...

  10. springboot整合thumbnailator实现图片压缩

    springboot整合thumbnailator实现图片压缩 前言 最近由于首页产品列表图片显示太慢,经过研究发现是用户上传的图片太大. 针对这个问题,想到的解决方案是: 1. 产品上传时,限定图片 ...