初学HTML5
2015-09-09 12:44
656 查看
今天上W3C开始看HTML5。(有些内容摘自W3C)
首先是一段实现拖放的代码:
开头是固定格式,并定义了3个function,分别是 allowDrop,drag和drop。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
阻止drop的默认处理方式。
在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。
drop(event):
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中
在body部分:
当放置被拖数据时,会发生 drop 事件。
为了使元素可拖动,把 draggable 属性设置为 true 。
ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
如果要在两个框实现来回拖放,只要将body部分改成如下:
接着,是用Canvas实现图形绘制的代码:
(代码实现鼠标放在框内能显示坐标)
具体代码:
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}得到坐标,x,y分别为坐标。
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}清除坐标。
body部分:
onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"不断随着鼠标移动得到和更新x,y值。
<div id="xycoordinates"></div>显示坐标值。
创建canvas和js部分:
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
JavaScript 使用 id 来寻找 canvas 元素:
然后,创建 context 对象:
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
首先是一段实现拖放的代码:
<!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> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" /> </body> </html>
开头是固定格式,并定义了3个function,分别是 allowDrop,drag和drop。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
阻止drop的默认处理方式。
event.preventDefault()
在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。
drop(event):
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
代码解释:
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中
在body部分:
进行放置 - ondrop
当放置被拖数据时,会发生 drop 事件。<img draggable="true" />
为了使元素可拖动,把 draggable 属性设置为 true 。
ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
如果要在两个框实现来回拖放,只要将body部分改成如下:
<body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" /> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body>
接着,是用Canvas实现图形绘制的代码:
(代码实现鼠标放在框内能显示坐标)
具体代码:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> body { font-size:70%; font-family:verdana,helvetica,arial,sans-serif; } </style> <script type="text/javascript"> function cnvs_getCoordinates(e) { x=e.clientX; y=e.clientY; document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; } function cnvs_clearCoordinates() { document.getElementById("xycoordinates").innerHTML=""; } </script> </head> <body style="margin:0px;"> <p>把鼠标悬停在下面的矩形上可以看到坐标:</p> <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div> <br /> <br /> <br /> <div id="xycoordinates"></div> </body> </html>
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}得到坐标,x,y分别为坐标。
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}清除坐标。
body部分:
onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"不断随着鼠标移动得到和更新x,y值。
<div id="xycoordinates"></div>显示坐标值。
创建canvas和js部分:
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
相关文章推荐
- html5 video标签全屏
- 我的ARM Cortex4学习(一):(CCSV5+win7+LM4F232H5QD)stellaris virtual serial port安装驱动的时候系统找不到指定的文件
- 使用HTML5的表单验证的简单示例
- 详解HTML5中的manifest缓存使用
- HTML/CSS(四)Manifest 应用缓存 HTML5
- HTML5中querySelector()和querySelectorAll()
- 基于HT for Web的3D树的实现
- html5 input type number 去掉加减号
- html5 input type number 去掉加减号
- 认识HTML5的WebSocket
- 讲座:html5于canvas疯狂的炮轰实现
- 使用HTML5的Canvas绘制曲线的简单方法
- 详解HTML5中ol标签的用法
- 深入解析HTML5中的Blob对象的使用
- HTML5 drawImage性能问题
- H5页面在线制作工具搜集
- html5培训课程培训 顺利完成获得宝贵财富
- H5教程:移动页面性能优化
- 玩转HTML5移动页面(优化篇)
- 玩转HTML5移动页面(动效篇)