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

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>

拖拽前：

拖拽后：

HTML5新特性之Canvas+drag(拖拽图像实现图像反转)的更多相关文章

Html5新特性 <canvas>画板画直线
以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
web全栈架构师[笔记] — 03 html5新特性
HTML5新特性一.geolocation PC端精度比较低通过IP库定位移动端通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
H5 语义化、基本事件浅析（含file对象、drag拖拽等）
1.语义化标签帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...
HTML5新特性--svg-echarts(重点)-拖动API-WebWorker
一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...
canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
引言在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...
html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录对于初接触的人来说是一个导向对于已经接触过的人来说是一个检测你掌握程度的检 ...
HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
html5 新特性
1.querySelector 返回文档中匹配指定css选择器的一个元素. 注意:uerySelector() 方法仅仅返回匹配指定选择器的第一个元素如果你需要返回所有的元素,请使用 querySe ...
html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单表单2. ...

随机推荐

Xcode编译项目出现访问private key提示框
原因: 在编译时Xcode进行codesign时需要访问"private key"时没有权限,然后让询问是否允许,有三个选项,全部允许.否绝.允许,一次弹出4个(我遇到的) 遇到问 ...
linux 监控系统缓存和cpu
a=`free |head -n 2 |tail -n 1 |awk '{print $7}'`if [ $a -ge 900000 ];then sync && echo 1 ...
.getBoundingClientRect()
.getBoundingClientRect() 该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,他返回的是一个对象,即Object,该对象有4个属性:top,left,right, ...
windows8.1 App中webView 使用定位
windows8.1的webview的网页中没有办法直接定位要想定位比较费劲查了好久才发现一个可行的办法那就是通过后台代码获取位置信息然后调用页面中已有的获取位置信息的JS方法把位置信 ...
JavaScript中document.cookie
“某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息,这些文件就称为 Cookie.”—— MSIE 帮助.一般来说,Cookies 是 CGI 或类似,比 HTML 高级的文件.程序等创建 ...
ECSHOP错误Redefining already defined constructor for class如何解决
本地PHP环境PHP5.4,安装ecshop2.7.3后,很多地方会报如下的错 Redefining already defined constructor for class XXX 使用和类名相同 ...
Android扫描二维码实现登录网页
工程代码:ScanQRcode.zip ------------------------------------------------------------------ 1. 扫描二维码登录的实现 ...
cocos2dx调度器scheduler
/ 让帧循环调用this->update(float dt)函数 // scheduleUpdate(); // 让帧循环去调用制定的函数,时间还是1/60秒 // schedule(sched ...
[Usaco2006 Dec]Milk Patterns
[Usaco2006 Dec]Milk Patterns Description 农夫John发现他的奶牛产奶的质量一直在变动.经过细致的调查,他发现:虽然他不能预见明天产奶的质量,但连续的若干天的 ...
[转载]网络编辑必知常识:什么是PV、UV和PR值 zz
1.什么是pv PV(page view),即页面浏览量,或点击量;通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标. 高手对pv的解释是,一个访问者在24小时(0点到24点)内到底看了你网 ...

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

HTML5新特性之Canvas+drag(拖拽图像实现图像反转)的更多相关文章

随机推荐

热门专题