初学HTML5

最新推荐文章于 2022-08-27 12:51:57 发布

IreneByron

最新推荐文章于 2022-08-27 12:51:57 发布

阅读量292

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/IreneByron/article/details/48314323

版权

HTML5 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

今天上W3C开始看HTML5。（有些内容摘自W3C）

首先是一段实现拖放的代码：

<!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" οndrοp="drop(event)"
οndragοver="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
οndragstart="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" οndrοp="drop(event)" οndragοver="allowDrop(event)">
  <img src="/i/w3school_logo_black.gif" draggable="true" οndragstart="drag(event)" id="drag1" />
</div>
<div id="div2" οndrοp="drop(event)" οndragοver="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" οnmοusemοve="cnvs_getCoordinates(event)" οnmοuseοut="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部分：

οnmοusemοve="cnvs_getCoordinates(event)" οnmοuseοut="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 坐标用于在画布上对绘画进行定位。

IreneByron

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
初学HTML5

今天上W3C开始看HTML5。首先是一段实现拖放的代码：function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var d
复制链接

扫一扫