HTML5API(5)
一、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)的更多相关文章
- HTML5入门总结 HTML5API
w3cshools MDN英文 MDN中文 HTML5 HTML5 is the latest evolution of the standard that defines HTML. The t ...
- HTML5API之获取地理位置详解
在使用地理位置API之前先来了解一下什么是经度和纬度以及地理位置获取的原理 首先经度指的是南北极的连接线,纬度指的是东西的连接线 地理位置的获取原理是通过IP地址(基于ISP记录,能够知道这个IP地址 ...
- 山寨HTML5API classList类
preface 认为自己去写一些类,你真的会找到自己不足的地方.事实上厉害不是你实现一个类.而是你怎样去设计一个类,能让开发人员更加easy操作. 对于这个操作样式,能够通过javascript訪问s ...
- HTML5API(4)
十三.服务器推送 服务器主动向客户端推送信息 传统的HTTP协议传输,服务器是被动相应客户端的请求 1.解决方案 ajax轮询.ajax长轮询 Server-Send-Event WebSocket ...
- HTML5API(3)
十一.ajax同源操作 URL说明是否允许通信 同一域名下允许 http://www.a.com/a.js , http://www.a.com/b.js 同一域名下不同文件夹允许 http://ww ...
- HTML5API(2)
四.文件API 1.概述 H5允许JS有条件的读取客户端文件 允许读取的文件:1.待上传的文件2.拖进浏览器的文件 多文件上传设置属性multiple 过滤上传文件类型 设置accept属性 acce ...
- HTML5API
H5新API 一.地理位置API 1.navigator.geolocation对象 getCurrentPosition(callback,errCallback,options)获取当前位置 wa ...
- 浏览器桌面通知Notification探究
首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
随机推荐
- POJ2079:Triangle——题解
http://poj.org/problem?id=2079 题目大意:求最大面积的三角形. —————————————————— 可以知道,最大面积的三角形的顶点一定是最大凸包的顶点. 接下来就是O ...
- BZOJ4945 & 洛谷3825 & UOJ317:[NOI2017]游戏——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4945 https://www.luogu.org/problemnew/show/P3825 ht ...
- JavaScript定义类与对象的一些方法
最近偶然碰到有朋友问我"hoisting"的问题.即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的.可以看看这个例子: 1 var a = 'global'; 2 (fu ...
- JavaScript URL汉字编码转换
在使用url进行参数传递时,经常会传递一些中文名的参数或URL地址,在后台处理时会发生转换错误.在有些传递页面使用GB2312,而在接收页面使用UTF8,这样接收到的参数就可能会与原来发生不一致.使用 ...
- stout代码分析之三:Option类
为了安全表示NULL, stout实现了Option类.Option对象有两种状态: enum State { SOME, NONE, }; 其中SOME表示非空,NONE表示为空.可通过isSome ...
- bzoj1177 [Apio2009]Oil 二维前缀最大值,和
[Apio2009]Oil Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 2300 Solved: 932[Submit][Status][Disc ...
- C#或ASP.NET绘图初探
C#或ASP.NET的简单绘图 public void ProcessRequest (HttpContext context) { context.Response.ContentType = &q ...
- [技巧篇]11.JavaScript原生态如何获取浏览器请求地址中的参数
var getAccessParams = function(){ var i,ilen,strs,keyName,keyValue, params={}, path = window.locatio ...
- web.xml中出现<servlet-name>default</servlet-name>是什么意思?
转载自:http://blog.csdn.net/hello5orld/article/details/9407905 在web.xml文件中经常看到这样的配置<servlet-name> ...
- sqlserver 个人整理
1.创建临时表(临时表的生命周期是当前回话中) //创建临时表是使用#+表名 //判断临时表是否存在 if object_id('tempdb..#ttt1') is not null Begin d ...