标签：html5 canvas drag audio video
一、HTML5有哪些新特性
1.用于媒体播放的<audio>、<video>
2.用于绘画的<canvas>
3.更好的支持本地离线存储
4.新的特殊内容元素,如：article、header、footer、nav等
5.新的表单控件，如：calendar、date、time、email、url、search
二、音频和视频播放
1.简单的音频播放和视频播放
<video width="100%" height="80%" src="./media/CoolShow_02.mp4" controls="controls">你的浏览器不支持该标签</video>
<audio src="./media/My_Destiny.mp3" controls="controls">你的浏览器不支持该元素</audio>上面的controls属性使用的是<video>和<audio>自带的播放控件，如播放控制、声音控制、全屏控制等。
2.格式问题
由于不同的浏览器支持的播放格式不同，如何实现在不同的浏览器上使用相同的代码?
html5提供了<resource>标签，可以同时提供多套视频格式，浏览器会自动使用第一个能识别的视频格式。
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
你的浏览器不支持该标签
</video>3.自定义按钮实现播放/暂停、画面大小控制。
<script type="text/javascript">
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>4.视频编解码工具
三、拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 488px;
height: 370px;
background-color: #aaaaaa;
}
img {
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
//设置拖拽对象，以id的形式进行标记
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
//取得对象，存放
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");//获得要拖拽的元素的id
// ev.target.appendChild(document.getElementById("drag1"));
ev.target.appendChild(document.getElementById(data));//2种都可以
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br/>
<img id="drag1" src="header.jpg" draggable="true" ondragstart="drag(event)"/>
</body>
</html>
canvas元素本身是没有绘图能力的，所有的绘制工作必须在js中完成。
1.绘制线条
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #FF0000;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");//创建context对象，起始坐标（0,0）
cxt.moveTo(10, 10);//moveTO：移动画笔，不连线
cxt.lineTo(150, 50);//lineTo：连线
cxt.lineTo(10, 50);
cxt.lineTo(10,10);
cxt.stroke();
</script>
</body>
</html><!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000"; //填充颜色
cxt.beginPath();
//参数分别为：圆心坐标x,y,半径，起始弧度，和终止弧度
cxt.arc(70,38,35,4,Math.PI*2,true); //填充的参数
cxt.closePath();
cxt.fill();//完成填充
</script>
</body>
</html><!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var grd = cxt.createLinearGradient(0, 0, 180, 30);//与渐变有关的一些参数值
grd.addColorStop(0, "#FF0000");//起始颜色
grd.addColorStop(1, "#00FF00");//结束颜色
cxt.fillStyle = grd; //将渐变色设置为填充颜色
cxt.fillRect(0, 0, 175, 60);//填充区域
</script>
</body>
</html>五、SVG
和canvas相似，区别在于SVG绘制的图是可伸缩的矢量图，不依赖与分辨率。
1.绘制五角星
<!DOCTYPE HTML>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200">
<polygon points="100,10,40,180,190,60,10,60,160,180"
style="fill:lime;stroke: purple;stroke-width:5;fill-rule: evenodd;">
</polygon>
</svg>
</body>
</html>六、Geolocation地理定位
标签：html5 canvas drag audio video
原文地址：http://blog.csdn.net/z18789231876/article/details/43817965
