html5 画布拖放图片,html5视频（video）,拖放（drag,drop）,画布（canvas）

html5：

一、 :

play()：播放

pause()：暂停

load()：重新加载

canPlayType()：可以播放的类型

例：

var Id = document.getElementByIdx_x_x(id);

Id.play(); //播放

Id.pause(); //暂停

例:

if (Id.paused) //若暂停

Id.play(); //则播放

二、拖放：

被拖的数据的标签里面的属性：1、draggable = "true";

2、ondragstart = drag(event);

drag(ev){

ev.dataTransfer.setData("Text",ev.target.id)

//drag函数就会把img的id属性记录在事件中，记录值的类型是Text。

}

规定放置被拖动元素的地方：

在标签里面添加属性和方法：

1、定义一个事件:ondragover,在这个事件中，需要阻止对事件的默认处理方式，就是加上一个event.preventDefault();

οndragοver="allowDrop(event);

function allowDrop(ev)

{

ev.preventDefault();

}

2、添加一个ondrop事件，就是获得ondragstart事件中的div的id，然后再加到自身div中

ondrop = "drop(event)"

function drop(ev){

ev.preventDefault(); //阻止默认事件

var data =

ev.dataTransfer.getData("Text"); //获得被拖元素的id

ev.target.a(documrnt.getElementById(data)); //将被拖数据加到该div中

}

三、画布(canvas)

用div的id来寻找canvas元素

中间是不支持该标签时的提示信息

var c = document.getElementByIdx_x_x("myCanvas");

var cxt = c.getContext("2d") //Canvas.getContext(contextID)方法返回一个用于在画布上绘图的环境,唯一支持2d

1、画矩形

cxt.fillStyle="#FF0000"; //定义用什么颜色填充图形

cxt.fillRect(0,0,150,75); //画矩形，左上角的坐标为(0,0)，宽度：150，高度：75

2、画直线

cxt.moveTo(10,10); //开始位置坐标为(10,10)

cxt.lineTo(150,50); //画直线到达坐标(150,50)的点

cxt.lineTo(10,50); //再到达坐标(10,50)的点

cxt.strokeStyle = "green"; //规定画出路径的颜色

cxt.stroke(); //结束，绘制一条路径

3、画圆

cxt.fillStyle="#FF0000"; cxt.beginPath(); //丢弃任何当前定义的路径并且开始一条新的路径。开始点(0,0)

cxt.arc(70,18,15,0,Math.PI*2,true); //圆心坐标(70,18),半径15，开始角度0*180,，Math.PI*2表示结束角，这里是一个完整的圆，true表示是逆时针方向绘制

cxt.closePath(); //关闭一条打开的路径

cxt.fill(); //填充路径

4、渐变对象

var grd=cxt.createLinearGrandient(0,0,175,50); //方法创建线性的渐变对象,渐变开始点坐标：(0,0)开渐变结束点坐标(175,50)。

grd.addColorStop(0,"#FF0000"); //第一个参数为0.0到1.0之间的浮点数，表示这个渐变从上 一个位置到这个位置之间的颜色建表，0表示开始点，1对应结束点

grd.addColorStop(1,"#00FF00"); //对应结束点

cxt.fillStyle=grd; //表示填充颜色为这个

cxt.fillRect(0,0,175,50); //画矩形

5、放置图像

var img=new Image() //创建图像对象

img.src="1.png" //图像的路径

cxt.drawImage(img,0,0); //drawImage() 方法在画布上绘制图像、画布或视频。在(0,0)点放置

在画布上定位图像：

context.drawImage(img,x,y);

JavaScript 语法 2

在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,x,y,width,height);

JavaScript 语法 3

剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数值

参数

描述

img

规定要使用的图像、画布或视频。

sx

可选。开始剪切的 x 坐标位置。

sy

可选。开始剪切的 y 坐标位置。

swidth

可选。被剪切图像的宽度。

sheight

可选。被剪切图像的高度。

x

在画布上放置图像的 x 坐标位置。

y

在画布上放置图像的 y 坐标位置。

width

可选。要使用的图像的宽度。(伸展或缩小图像)

height

可选。要使用的图像的高度。(伸展或缩小图像)