【实例】html5-canvas上实现图片的颠倒效果

最新推荐文章于 2022-09-06 03:19:55 发布

_Slience_

最新推荐文章于 2022-09-06 03:19:55 发布

阅读量1.8w

点赞数

分类专栏： html5-canvas

本文链接：https://blog.csdn.net/u010513756/article/details/48131231

版权

html5-canvas 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在线演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#canvas {
				border: thin solid black;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="1200" height="600"></canvas>
		<input type="button" id="reverse" value="颠倒切换" />
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		
		var image = new Image();
		image.src = "testImage.jpg";<span style="white-space:pre">	</span>//我是图片
		
		context.drawImage(image, 0, 0, canvas.width, canvas.height);
		
		var reverse = document.getElementById("reverse");
		reverse.onclick = showReverse;
		function showReverse() {
			context.translate(canvas.width/2, canvas.height/2);
			context.rotate(Math.PI);
			context.translate(-canvas.width/2, -canvas.height/2);
			
			context.drawImage(image, 0, 0, canvas.width, canvas.height);
		};
	</script>
</html>