##暑假充电之————HTML5 NO.4

###HTML5<video>
当前video支持三种视频格式,MPEG4,Ogg,WebM

Ogg:带有Theora视频编码和Vorbis音频的Ogg文件;

MPEG4:带有H.264视频编码和AAC音频的Ogg文件;

WebM:带有VP8视频编码和Vorbis音频的Ogg文件;

语法:<video src="url" controls="controls" width="宽" height="高">文本</video>

·controls 属性提供播放、暂停和音量控件;
·<video></video>中插入的文本内容是供不支持video元素的浏览器显示的;
video元素允许多个source元素,可以链接多个不同的视频文件(浏览器使用第一个可以识别的格式);

<video>
    <source src="url" type="video/mp4">
</video>

<video>标签的属性

属性

说明

autoplay

autoplay

视频在就绪后马上播放

controls

controls

向用户显示播放,暂停,音量等控件

loop

loop

播放后再次播放(循环)

preload

preload

在页面加载时进行加载,并与播放

###HTML5<audio>标签
相关用法同<video>基本相同

###HTML5 拖放
1.设置元素为可拖放
<img draggable="true">

2.拖动什么

ondragstart和setData()

ondragstart属性调用了一个函数,drag(event)规定了被拖动的数据

3.放到何处

ondraover规定在何处放置被拖动的数据

默认无法将数据/元素到其他元素中,若需要设置允许,必须阻止对元素的默认处理方式(通过调用ondragover事件的event.preventDefault()方法)

4.进行放置

当放置被拖数据时,会发生drop事件
ondrop属性调用了一个函数drop(event)

function drop(ev)
{
    ev.preventDefault();<!--调用preventDefault()避免浏览器对数据的默认处理(drop事件的默认行为是以链接的形式打开)-->
    var data=ev.dataTransfer.getData("Text");<!--获得被拖的数据,该方法将返回在setData()方法中设置为相同类型的任何数据-->
    ev.target.appendChild(document.getElementById(data));
}

被拖数据是被拖元素的 id (“drag1”)

把被拖元素追加到放置元素(目标元素)中

###HTML5 Canvas
用于在网页上绘制图形

创建Canvas元素

<canvas id="mycanvas" width="200" height="200"></canvas>

canvas元素本身是没有绘图能力的,所有工作在javascript内完成

每个canvas元素都有一个对应的context对象(上下文对象),Canvas API定义在这个context对象上面,所以需要获取这个对象,方法是使用getContext方法。

1
2
3
4
5
var canvas = document.getElementById('myCanvas');//Javascript使用id寻找canvas元素
if (canvas.getContext)
{
var cxt = canvas.getContext('2d');然后创建context对象<br>
}

Canvas API

stroke();//给线段着色

fill();//填充(实心)

cxt.fillStyle = "#008600";//设置填充颜色

cxt.strokeStyle="yellow";//设置笔触颜色

填充或画路径需要先闭合再画
1.绘制线段

1
2
3
4
5
6
7
8
cxt.moveTo(20,20);//设置起点坐标
cxt.lineTo(20,200);//设置终点坐标
cxt.lineTo(200,200);
cxt.lineTo(200,20);
cxt.lineWidth = 1.0; // 设置线宽
cxt.strokeStyle = "#CC0000"; // 设置线的颜色
cxt.closePath();//关闭路径,使用此方法可以将当前点到起点封闭起来,省去一步cxt.lineTo(20,20);
cxt.stroke();//给线段着色

2.绘制圆形/扇形

1
arc(x,y,r,startAngle, endAngle, anticlockwise);//(横坐标,纵坐标,半径,起始角度,结束角度,顺(false)/逆(true)时针)

3.绘制矩形

1
rect(x,y,width,height);//(横坐标,纵坐标,长,宽)

4.文本

1
2
3
4
fillText("string",x,y);//("文本",横坐标,纵坐标)
cxt.font = "Bold 20px Arial"; // 设置字体
cxt.textAlign = "left";// 设置对齐方式
cxt.strokeText("Hello!", 10, 100); // 绘制空心字

5.图片chrome内核的浏览器不支持

1
2
3
var img = new Image();
img.src="image.jpg";
cxt.drawImage(img,x,y);//(图像文件的DOM元素(即img标签),横坐标,纵坐标)

6.旋转

1
2
3
4
5
6
7
8
9
//1.设置旋转环境
cxt.save();
cxt.restore();
//2.重置(0,0)坐标点
cxt.translate(x1,y1);
//3.设置旋转角度 参数是弧度 (角度*Math.PI/180)
cxt.rotate(-10*Math.PI/180);
//4.画图
//同1~5

7.练习:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html>
<head>
<canvas width="1000" height="1000" style="background:blue" id='canvas'>
您的浏览器不支持canvas画布
</canvas>
<script>
//获取画布
var canvas=document.getElementById('canvas');
if (canvas.getContext)
{
var cxt = canvas.getContext('2d');
}
//画线段
cxt.beginPath();//开启路径
cxt.moveTo(20,20);//设置起点坐标
cxt.lineTo(20,200);//设置终点坐标
cxt.lineTo(200,200);
cxt.lineTo(200,20);
cxt.lineWidth = 1.0; // 设置线宽
cxt.strokeStyle = "#CC0000"; // 设置线的颜色
cxt.closePath();//关闭路径,使用此方法可以将当前点到起点封闭起来,省去一步cxt.lineTo(20,20);
cxt.stroke();//给线段着色
//画圆形
//画实心圆
cxt.beginPath();
cxt.arc(110,110,80,0,360,false);//ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
cxt.lineWidth = 10.0; // 设置线宽
cxt.strokeStyle="green";
cxt.stroke();
cxt.fillStyle="yellow";
cxt.fill();
cxt.closePath();
//画空心圆
cxt.beginPath();
cxt.arc(110,310,80,0,360,false);//ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
cxt.lineWidth = 1.0; // 设置线宽
cxt.strokeStyle="green";
cxt.stroke();
cxt.closePath();
//画矩形
//画空心矩形
cxt.beginPath();
cxt.rect(20,500,180,20);
cxt.stroke();
cxt.closePath();
//画空心矩形的另一种方法
cxt.strokeRect(20,540,180,20);
//画实心矩形
cxt.beginPath();
cxt.rect(20,580,180,20);
cxt.fill();
cxt.closePath();
//画实心矩形的另一种方法
cxt.fillRect(20,620,180,20);
//文字
//实心文字
cxt.font=("60px 宋体");
cxt.fillText("Hello World",20,700);
cxt.fill();
//空心文字
cxt.font=("60px 宋体");
cxt.strokeStyle="yellow";
cxt.strokeText("Hello World",20,800);
cxt.stroke();
//旋转
//设置旋转环境
cxt.save();
//转换参考点
cxt.translate(20,20);
//设置旋转角度 参数是弧度 角度*Math.PI/180
cxt.rotate(-10*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(0,180);
cxt.stroke();
cxt.closePath();
cxt.restore();
</script>
</head>
</html>

预览:

预览图

源代码文件:点击下载

###HTML5 内联SVG
SVG是指可伸缩矢量图形

  1. 可通过文本编辑器创建/修改;
  2. SVG图像可以被搜索索引,脚本化或压缩;
  3. 可以伸缩;
  4. 可以高质量地打印

    语法:<svg xmlns="url" version="1.1" height="100"></svg>

    继续学习:

    ###HTML5 地理位置
    使用getCurrentPosition()方法获取用户的位置

    若成功,则getCurrentPosition()方法返回对象,始终会返回latitude,longitude以及accuracy属性












    属性描述
    coords.latitude十进制数的纬度
    coords.longitude十进制数的经度
    coords.accuracy位置精度
    coords.altitude海拔
    coords.altitudeAccuracy位置的海拔精度
    coords.heading方向,以正北开始以读
    coords.speed速度,以米/秒计
    timestamp响应的日期和时间

    Getlocation()对象

    watchPosition() 返回用户当前位置,并继续返回用户移动时的更新位置

    clearWatch() 停止watchPosition()方法