时间戳

首页 > 技术文章 > HTML5(Canvas Vedio Audio 拖动)

HTML5(Canvas Vedio Audio 拖动)

fzuhyj 2017-07-12 00:53 原文

1、Canvas    (在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字)

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;background:#ddd;">
</canvas>//style属性用来绘制边框

soild 是线框

<canvas id="myCanvas" width="200" height="100"
style="border:10px dotted #000000;background:#ddd;">
</canvas>//style属性用来绘制边框

dotted是点

 

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

 

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");//创建c的context对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
cxt.fillStyle="#FF0000";//以下两行代码创建一个红色矩形，fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
cxt.fillRect(0,0,150,75);
</script>

理解坐标

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。横轴是X轴 纵轴是Y轴

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

 

实例 - 线条

通过指定从何处开始，在何处结束，来绘制一条线：

 

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标

然后使用 stroke() 方法来绘制线条:

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10); 
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

实例 - 圆形

通过规定尺寸、颜色和位置，来绘制一个圆：

 

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2);//arc(x,y,r,start,stop) x,y为圆心坐标，r为半径

cxt.closePath();
cxt.fill();//可以填充颜色
//或者 cxt.stroke(); 但是该方法只会画出线，无法填充颜色

</script>

实例 - 渐变

使用您指定的颜色来绘制渐变背景：

  • createLinearGradient(x,y,x1,y1) - 创建线条渐变，(x,y)左上角坐标 (x1,y1)右下角坐标
  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

 

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");//0表示开始
grd.addColorStop(1,"#00FF00");//1表示结束
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

//先创建cxt中的一个渐变色对象grd，再对grd对象进行填充色赋值，再将grd对象填充给cxt

实例 - 图像

把一幅图像放置到画布上：

drawImage(image,x,y)   //(x,y)为左上角坐标

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

</script>

 

Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

  • font - 定义字体
  • fillText(text,x,y) - 在 canvas 上绘制实心的文本
  • strokeText(text,x,y) - 在 canvas 上绘制空心的文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

 

2、Video

如需在 HTML5 中显示视频

<video src="movie.ogg" width="320" height="240" controls="controls">
</video>

control 属性供添加播放、暂停和音量控件。

包含宽度和高度属性也是不错的主意。

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的：

<video width="320" height="240" controls="controls">
  <source src="/i/movie.ogg" type="video/ogg">
  <source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

 

video标签属性：http://www.w3school.com.cn/tags/tag_video.asp

　　方法事件：http://www.w3school.com.cn/html5/html_5_video_dom.asp

 

video各种控件

<div style="text-align:center;">
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">大</button>
  <button onclick="makeNormal()">中</button>
  <button onclick="makeSmall()">小</button>
  <br /> //换行  等效于 <br></br>
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div> 

<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>

 

3、音频audio（与视频vedio相似）

source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：(vedio也是)

<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

 

source属性:http://www.w3school.com.cn/html5/html_5_audio.asp

 

4、拖放

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

 

然后，规定当元素被拖动时，会发生什么。在下面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

 

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法

event.preventDefault()//避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
ev.target.appendChild(document.getElementById(data));//被拖数据是被拖元素的 id ("drag1")把被拖元素追加到放置元素（目标元素）中
}

 

全部代码

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)//使得可拖动(有数据存入从而使拖动有可能实现)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));//使得拖动后的图像可以得到显示(向目标添加一个子物体) 注意没引号
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div> //所有有拖放函数的div等元素 都可以存放拖动后的img

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />//使得可拖动(无数据即拖动后无法存储)

</body>
</html>
  1. DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
  2. draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如： 
    <div title="拖拽我" draggable="true">列表1</div>
  3. ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
  4. ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
  5. ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
  6. ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
  7. ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
  8. Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
  9. Event.effectAllowed 属性：就是拖拽的效果。

事件顺序:ondragstart   — ondrag — ondragenter — ondragover — ondragleave/ondrop — ondragend  

1.  若想触发ondrop事件，ondragover 中需要阻止默认事件（元素默认是不允许放置的）。

      2.  在Firefox 3.5+中，如果是把图像拖放到放置目标上，页面就会转向图像文件；而如果是把文本拖放到放置目标上，则会导致无效URL错误，因此，为了让Firefox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL

 

setData(key,value) 两个参数都是字符串类型
getData(key) getData()可以取得由setData()保存的值
effectAllowed 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)  ；事件 ondragstart中设置
setDragImage(element, x, y) 指定一副图像，当拖动发生时，显示在光标下方。这个方法接受的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标。其中，HTML元素（可以是隐藏的元素）可以是一副图像，也可以是其它元素。是图像则显示图像，是其它元素则显示渲染后的元素。实现这个方法的浏览器有Firefox 3.5+、Safari 4+ 和 Chorme
files   获取外部拖拽文件的一个类似数组的集合（length）。集合中每个元素有type属性，依次判断拖拽的文件类型。实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。

注：只能在拖放事件的事件处理程序中访问dataTransfer对象。

 

       保存在dataTransfer对象中的数据只能在【目标元素】事件处理程序中读取。

关于FileReader（读取文件信息）

 

 

readAsDataURL        
 参数为要读取的文件对象，将文件读取为DataUrl
onLoad                          
  读取成功完成时触发此事件，this.result 获取读取的文件数据，如果是图片，将返回base64格式的图片数据

5、

6、

7、

8、

9、

10、

推荐阅读