新元素

关于表单

< input>新类型

表单新属性

表单验证API

1. 获取表单DOM对象
2. 通过1获得的对象的validity属性获得validityState对象

validityState对象对象有以下属性

• valid：值为true表示表单控件通过了所有验证约束条件
• valueMissind：验证是否填写该字段，表单元素需设置required
• typeMismatch：验证填写内容是否与表单元素的type属性一致
• patternMismatch：验证填写内容是否与表单元素的pattern属性一致
• tooLong：验证填写内容是否与表单元素的maxLength属性一致
• rangeUnderflow：验证填写内容是否与表单元素的min属性一致
• rangeOverflow：验证填写内容是否与表单元素的max属性一致
• stepMismatch：验证填写内容是否与表单元素的step属性符合
• customError：自定义验证消息。通过setCustomValidity()设置错误提示信息，值为true

音视频

视频元素< video>

使用

有两种方式，推荐第二种

1

<video src="视频路径"></video>

1
2
3
4
5

<video>
   	<source src="视频路径" />
   	<source src="视频路径" />
   	<source src="视频路径" />
   </video>

属性

• src：属性值为视频路径
• autoplay：是否自动播放
• cntrols：是否显示控件
• loop：是否循环播放
• poster：指定在用户点击播放按钮前显示的图像
• width/height：视频显示的尺寸
• preload：设置是否预加载

API

方法

• play()：播放视频
• pause()：暂停视频
• load()：加载视频
• canPlayType(type)：是否能播放type指定格式的视频

事件

• play：当视频播放时触发
• pause：当视频暂停时触发
• ended：当视频结束时触发
• error：当视频错误时触发
• canplay：不考虑整体情况下只要能播放视频就播放
• canplaythrough：考虑整体情况下只要能播放视频就播放

属性

• src：获取或设置视频路径
• played：读取媒体文件的已播放部分的时间段
• paused：获取或设置是否暂停
• ended：获取或设置是否结束
• currentTime：获取或设置播放位置
• duration：视频时长
• progress：表示视频加载的进度

画布

使用

1. 在HTML中定义<canvas>
2. 在JS脚本中获取<canvas>DOM对象
3. 创建画布对象－－－getContext(‘2d’)
4. 使用画布API绘图

绘图API

设置

• fillStyle：设置填充色
• strokeStyle：设置描边色
• globalAlpha：设置透明度，值在0-1之间
• 设置渐变
  • createLinearGradient(x1, y1, x2, y2)：线性渐变
  • createRadiaGradient(x1, y1, r1, x2, y2, r2)：扇形渐变
  • addColorStop(point, color)：渐变点颜色

绘图

• fillRect(x, y, width, height)：实心矩形
• strokeRect(x, y, width, height)：描边矩形
• clearRect(x, y, width, height)： 清除指定区域

文字

• fillText(text, x, y)：实心文字
• strokeText(text, x, y)：描边文字
• textAlign：设置文字的水平方向对齐
• textBaseline：设置文字的垂直方向对齐
• 阴影效果
  • shadowColor：设置阴影颜色
  • shadowOffsetX：设置水平方向阴影
  • shadowOffsetY：设置垂直方向阴影
  • shadowBlur：设置阴影模糊程度

路径

• beginPath()：标志开始创建路径
• closePath()：标志结束创建路径
• rect(x, y, width, height)：设置矩形形状
• arc(x, y, radius, startAngle, endAngle, direction)：设置圆形形状
• 绘制线条
  • moveTo(x, y)：线条起点
  • lineTo(x, y)：线条终点/折点
  • lineCap：设置线条端点的形状
  • lineJoin：设置两条线交点的形状
  • miterLimit：配合lineJoin使用
• fill()：绘制填充
• stroke()：绘制描边
• clip()：切割画布
• 绘制图片

  1. 加载图片

     1 2	var img = new Image(); img.src = '图片路径';

  2. 绘制图片。需保证图片已加载完毕才能进行绘图操作

     1 2 3 4 5 6 7 8 9

     img.onload = function () { 画布对象.drawImage(img, x, y); 画布对象.drawImage(img, x, y, width, height); var ptn = 画布对象.createPattern(img. type); 画布对象. fillStyle = ptn; ... };

画布方法

• scale(x, y)：缩放
• translate(x, y)：重新定位
• rotate(angle)：旋转画布。注意，效果是画布内容发生旋转而不是画布，所以视觉效果为画布内容发生相反方向的旋转

扩展 关于SVG

图形

1
2
3
4
5
6

<rect x="" y="" width="" height="" />
<circle cx="" cy="" r="" />
<ellipse cx="" cy="" rx="" ry="" />
<line x1="" y1="" x2="" y2="" />
<polyline points="x1,y1 x2,y2 ..." />
<polygon points="x1,y1 x2,y2 ..." />

渐变

1
2
3
4
5
6

<defs>
	<linearGradient x1="" y1="" x2="" y2="" id="">
    	<stop offset="" stop-color="" />
    </linearGradient>
    <radiaGradient></radiaGradient>
</defs>

模糊

1
2
3
4
5

<defs>
    <filter id="">
        <feGaussianBlur in="SourceGraphic" stdDeviation=模糊程度 />
    </filter>
</defs>

拖拽

源元素事件

• dragstart：当鼠标开始拖放时被触发
• drag：鼠标拖放过程
• dragend：鼠标结束拖放触发

目标元素事件

• dragenter：当鼠标拖放进入到目标元素内被触发
• dragover：当鼠标到达目标元素触发
• drop：当鼠标实现拖放效果时被触发，需为dragover事件增加event.preventDefault()
• dragleave：当鼠标离开目标元素时触发

dataTransfer对象

dataTransfer：存储源元素信息

• setData(type, data)
• getData(type)
• clearData()

地理定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function geoFindMe() {
	if (!navigator.geolocation) {
		console.log("Your browser doesn't support Geolocarion");
	}
	function success(position) {
		var latitude = position.coords.latitude;
		var longitude = position.coords.longitude;
		console.log('latitude: ' + latitude + ' ; longitude : ' + longitude);
	}
	function error() {
		console.log('error');
	}
	navigator.geolocation.getCurrentPosition(success, error);
}
geoFindMe();

调用Google Maps API 调用百度地图API

Web Worker

1. 创建Web Worker对象
2. 为该对象绑定onmessage事件。通过event事件对象的data属性可以获取postMessage()方法传递的数据

1
2
3
4
5
6
7
8
9
10

var worker = new Worker(worker文件路径);
worker.onmessage = function (event) {
	var data = event.data;
    ...
}
// worker文件
...
postMessage(data);
...

Web存储

使用 WEB Storage API

• sessionStorage
• localStorage