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绘制图形
参考教程 http://www.runoob.com/svg/svg-tutorial.html
二、触摸屏事件
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、其他事件
转载于:https://www.cnblogs.com/DCL1314/p/7881041.html
HTML5API(5)相关推荐
- HTML5API（2）
四.文件API 1.概述 H5允许JS有条件的读取客户端文件 允许读取的文件:1.待上传的文件2.拖进浏览器的文件 多文件上传设置属性multiple 过滤上传文件类型 设置accept属性 acce ...
- h5执行php函数,值得一个的5个强大的HTML5API 函数
本篇文章主要介绍了HTML5拖拉上传文件的简单实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 在HTML5的pc上面实现了相当多的功能,工作中也用到了拖拉上传,特地记 ...
- 第十一章：WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
- html5语句大全,html5基础语句（学习）
起风了 兼容性问题 文档类型设定 字符设定 常用新标签 新增的input type属性值: 常用新属性 综合案例 兼容性问题 文档类型设定 document HTML http://blog.sina ...
- html的音频播放,HTML5 音频播放 audio
众所周知,在HTML5诞生之前网页上要播放一段视频基本都是依靠flash插件,而HTML5诞生了和标签,使得在HTML5上播放视频或者音频就像显示图片那么轻松 如果我们现在不需要使用浏览器内部的aud ...
- 100本最棒的web前端图书推荐
100本最棒的web前端图书推荐 01.<JavaScript DOM编程艺术第二版(中文)> 语言:中文 类型:pdf 简介:这本书作为被大家推荐的最多的前端入门书籍是有道理的. 他能真 ...
- JavaScript？静下心来的研究之路
目录 一. 入门级 二.初级开发: 三.中级开发 四.其他阅读 五. 结语 六.感谢 这是我这些年看的书.还有几本没有上镜,因为被朋友借走了,哈哈. (ps:这些书我也并又没全看完,有一些看的昏昏欲睡 ...
- 贝赛尔曲线及其应用全面解析
贝赛尔曲线及其应用全面解析 1.概念 贝塞尔曲线(Bezier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,一条贝塞尔曲线由路径 ...
最新文章
- NTU 课程笔记： CV6422 regression
- was连接oracle rac集群,Oracle集群（RAC）及 jdbc 联接双机数据库
- 网管的一天——按小时记录生活
- HBase 1.x Coprocessor使用指南
- 删除logs mysql_关于删除MySQL Logs的一点记录
- FISCO BCOS Solidity 使用Table合约CRUD接口 智能合约例子
- 无线路由器网络测试软件,如何简单快速测试家里无线路由器的网速和性能？
- ROS教程（一）：Ubuntu ROS安装详细教程（全过程）+测试程序
- coldfusion_为ColdFusion辩护
- 计算机计算乘除法的原理
- tensorflow2.10.0+CUDA11.2+cuDNN8.1 for cuda11.2
- PTA程序设计天梯赛 L2题解报告（40/40）
- JavaScript es6 五种常见继承方式
- 神经网络预测彩票数据
- 【分享】10 个“疯狂”的 Python 项目创意
- 人为增加近义词 | Word2Vec的语料制作和训练
- 【深耕冷链物流】HEGERLS移动冷库生产厂家 移动冷库箱成市场追捧的焦点
- excel的数据验证的功能和案例
- Handler源码翻译
- git 客户端官网下载太慢