您的位置：首页 > Web前端 > HTML5

HTML5新特性之Canvas+drag(拖拽图像实现图像反转)

2013-09-02 19:38 609 查看
1、什么是canvas

在网页上使用canvas元素时，会创建一块矩形区域，默认矩形区域宽度300px,高度150px。。

页面中加入canvas元素后，可以通过javascript自由控制。可以在其中添加图片、线条以及文字，也可以在里头绘图，还可 以加入高级动画。

使用canvas编程，首先要获得其上下文（context）。接着在上下文中执行动作，最后将动作应用到上下文中。

2、canvas坐标

坐标原点为左上角，x轴沿水平方向向右，y轴沿垂直方向向下。





3、替代内容

访问页面时，如果浏览器不支持canvas元素，或者不支持HTML5 Canvas API中的某些特性，开发者最好提供一份替代代码（可以是替代的图片或者说明性的文字）

<canvas>

Update your browser to enjoy canvas!

</canvas>

4、浏览器对HTML5 Canvas API的支持

首先创建一个canvas对象，并获取其上下文。如果发生错误，则捕获错误，进而得知浏览器不支持canvas。页面中预放入ID为support的元素，通过适当的信息更新元素内容，可以反应浏览器支持情况。

<!DOCTYPE HTML>
<html>
<head>
<title>Canvas API</title>
<meta charset="utf-8">
</head>

<body>
<p id="support"></p>

</body>
</html>

<script type="text/javascript">
<!--
try{
document.createElement("canvas").getContext("2d");
document.getElementById("support").innerHTML =
"HTML5 Canvas is supported in your browser."
}catch(e){
document.getElementById("support").innerHTML =
"HTML5 Canvas is not supported in your browser."
}
//-->
</script>


5、什么是拖拽

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {
width:420px;
height:300px;
padding:10px;
border:1px solid #aaaaaa;}
</style>

<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>
<p>请把图片拖拽到矩形中</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="test.jpg" draggable="true" ondragstart="drag(event)" />
</body>
</html>

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

<img draggable="true" />

拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么。

在上面的例子中，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()

进行放置 - ondrop

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

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

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}


拖拽前：



拖拽后：



6、Canvas+drag

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Canvas Learn</title>
<style>
body{
background-color:#cccccc;
border:solid 1px;
border-color:white;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin:0px auto;
}
header{
text-align:center;
background-color:#7f3058;
display:block;
color:#FFFFFF;
}
h1{
font-size:36px;
}
nav{
float:left;
display:block;
text-align:center;
width:15%;
}
nav h3{
margin:15px;
color:white;
}
nav a:link,nav a:visited{
display:block;
padding:10px;
font-weight:bold;
border-bottom:3px solid #fff;
margin:5px;
text-decoration:none;
}
nav a:hover{
color:white;
background-color:#7f3058;
}
section{
float:left;
display:block;
width:55%;
}
article{
background-color:#ddd;
display:block;
margin:10px;
padding:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:2px 2px 20px #aaa;
-moz-box-shadow:2px 2px 20px #aaa;
box-shadow:2px 2px 20px #aaa;
}
article header{
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
font-size:18px;
}
article div{
width:440px;
height:300px;
margin:10px;
padding:10px;
border:1px solid #000;
float:center;
}
footer{
clear:both;
display:block;
background-color:#7f3058;
color:#fff;
text-align:center;
padding:5px;
float:bottom;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
font-size:18px;
}
p{
color:blue;
text-align:center;
}
aside{
display:block;
width:25%;
float:left;

background-color:#ddd;
margin:10px;
padding:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:2px 2px 20px #aaa;
-moz-box-shadow:2px 2px 20px #aaa;
box-shadow:2px 2px 20px #aaa;
}
aside header{
margin:15px;
color:white;
font-size:15px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
aside p{
margin:15px;
color:white;
font-weight:bold;
font-style:italic;
text-align:left;
}
</style>
</head>

<body>
<header>
<h1>Canvas Learn</h1>
</header>

<div id="canvas">
<nav>
<header><h3>导 航 栏</h3></header>
<a href="http://www.w3school.com.cn/html5/tag_canvas.asp">canvas标签</a>
<a href="http://www.w3school.com.cn/html5/html_5_canvas.asp">canvas学习</a>
<a href="http://zh.wikipedia.org/wiki/Canvas_(HTML%E5%85%83%E7%B4%A0)">canvas维基</a>
</nav>

<section>
<article>
<header><h3>Canvas图像处理</h3></header><br />
<div id="src">
<canvas id='image_src' width='420' height='300'
draggable="true" ondragstart="drag(event)">
当前浏览器无法使用canvas标签，请更换新版本浏览器
</canvas>
</div>
<p>将图片拖拽到下面方框内</p>
<div id="dst" ondrop="drop(event)" ondragover="allowDrop(event)">
<canvas id='image_dst' width='420' height='300'></canvas>

</div><br />

<footer>
<h4>拖拽图片到另一个框内，图像发生反转</h4>
</footer>
</article>
</section>
</div>

<aside>
<header><h3>定义和用法</h3></header>
<p>canvas 标签定义图形，比如图表和其他图像。</p>
<p>canvas 标签只是图形容器，您必须使用脚本来绘制图形。</p>
</aside>

<footer>
<h2>Copyright:Caijinping</h2>
</footer>

</body>

</html>

<script type="text/javascript">
<!--
var canvasSrc = document.getElementById('image_src');
var contextSrc = canvasSrc.getContext('2d');
image = new Image();
image.src="test.jpg";
image.onload=function(){
contextSrc.drawImage(image,0,0);
}

function draw(){
var canvasDst = document.getElementById('image_dst');
var contextDst = canvasDst.getContext('2d');
var imageDataSrc = contextSrc.getImageData(0,0,image.width,image.height);
var imageDataDst = contextDst.createImageData(image.width, image.height);
for (var j = 0; j < image.height ; j++ )
for (var i = 0; i < image.width ;i++ ){
k = 4*(image.width*j+i);
imageDataDst.data[k + 0] = 255 - imageDataSrc.data[k + 0];
imageDataDst.data[k + 1] = 255 - imageDataSrc.data[k + 1];
imageDataDst.data[k + 2] = 255 - imageDataSrc.data[k + 2];
imageDataDst.data[k + 3] = 255;
}
contextDst.putImageData(imageDataDst,0,0);
}

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));
draw();
}
//-->
</script>


拖拽前：



拖拽后：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航