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、其他事件

posted @ 2017-11-22 20:10  不完美的完美  阅读(283)  评论(0)    收藏  举报