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

最新推荐文章于 2024-03-25 12:20:51 发布

蔡金平

最新推荐文章于 2024-03-25 12:20:51 发布

阅读量1.3w

点赞数 2

分类专栏：编程语言文章标签： canvas CSS HTML5 javascript 拖拽

本文链接：https://blog.csdn.net/xsc_c/article/details/10857859

版权

编程语言专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
	<br />
	<img id="drag1" src="test.jpg" draggable="true" οndragstart="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" οndragstart="drag(event)">
					当前浏览器无法使用canvas标签，请更换新版本浏览器
					</canvas>
				</div>
				<p>将图片拖拽到下面方框内</p>
				<div id="dst" οndrοp="drop(event)" οndragοver="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.οnlοad=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>

拖拽前：

拖拽后：

蔡金平

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
HTML5新特性之Canvas+drag(拖拽图像实现图像反转)

1、什么是canvas 在网页上使用canvas元素时，会创建一块矩形区域，默认矩形区域宽度300px,高度150px。。页面中加入canvas元素后，可以通过javascript自由控制。可以在其中添加图片、线条以及文字，也可以在里头绘图，还可以加入高级动画。使用canvas编程，首先要获得其上下文（context）。接着在上下文中执行动作
复制链接

扫一扫