【实例】html-canvas中实现图片的放大

最新推荐文章于 2024-03-29 17:03:34 发布

_Slience_

最新推荐文章于 2024-03-29 17:03:34 发布

阅读量1.7w

点赞数

分类专栏： html5-canvas

html5-canvas 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

摘自《HTML5 Canvas和性技术：图形、动画与游戏开发》

在线演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background: rgba(100, 145, 250, 0.3);
			}
			#scaleSlider {
				vertical-align: 10px;
				width: 100px;
				margin-left: 90px;
			}
			#canvas {
				margin: 10px 20px 0px 20px;
				border: thin solid #aaaaaa;
				cursor: crosshair;
			}
			#controls {
				margin-left: 15px;
				padding: 0;	
			}
			#scaleOutput {
				position: absolute;
				width: 60px;
				height: 30px;
				margin-left: 10px;
				vertical-align: center;
				text-align: ccenter;
				color: blue;
				font: 18px arial;
				text-shadow: 2px 2px 4px rgba(100, 140, 250, 0.8);
			}
		</style>
	</head>
	<body>
		<div id="controls">
			<output id="scaleOutput">1.0</output>
			<input id="scaleSlider" type="range" min="1" max="3.0" step="0.01" value="1.0">
		</div>
		<canvas id="canvas" width="1200" height="600"></canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var image = new Image();
		
		var scaleSlider = document.getElementById("scaleSlider");
		var scaleOutput = document.getElementById("scaleOutput");
		//比例值
		var scale = 1.0;
		//最小比例
		var MINIMUM_SCALE = 1.0;
		//最大比例
		var MAXIMUN_SCALE = 3.0;
		
		function drawImage() {
			var w = canvas.width;
			var h = canvas.height;
			//缩放后的宽度
			var sw = w * scale;
			//缩放后的高度
			var sh = h * scale;
			
			context.clearRect(0, 0, canvas.width, canvas.height);
			//关键点，参数一：当前图像对象不变
			//参数二：新的图像的起始坐标X，咱们可以想象一个按中心点拉大的图，和原始图，原始图的(0,0)坐标实际上是
			//拉大的图的长度减去原始图的长度的差值除以二，最好画在纸上就知道为什么要除以二了
			//参数三与之类似，后两个参数是
			
			context.drawImage(image, -sw/2+ w/2, -sh/2 + h/2, sw, sh);
		}
		
		function drawScaleText(value) {
			//使用toFixed保证有两个小数位
			var text = parseFloat(value).toFixed(2);
			//换算，可以说是还需要显示百分之几的内容
			var percent = parseFloat(value - MINIMUM_SCALE) /
							parseFloat(MAXIMUN_SCALE - MINIMUM_SCALE);
			scaleOutput.textContent = text;
			//最小不能低于0.35
			percent = percent < 0.35 ? 0.35 : percent;
			//字号也跟着一起改变
			scaleOutput.style.fontSize = percent * MAXIMUN_SCALE / 1.5 + "em";
		}
		scaleSlider.onchange = function(e) {
			//当前滑块的值
			scale = e.target.value;
			//保证不能太大或者太小
			if(scale < MINIMUM_SCALE) {
				scale = MINIMUM_SCALE;
			} else if(scale > MAXIMUN_SCALE) {
				scale = MAXIMUN_SCALE
			}
			drawScaleText(scale);
			drawImage();
		};
		
		context.fillStyle = "cornflowerblue";
		context.strokeStyle = "yellow";
		context.shadowColor="rgba(50, 50, 50, 1.0)";
		context.shadowOffsetX = 5;
		context.shadowOffsetY = 5;
		context.shadowBlur = 10;
		
		image.src = "48091305.jpg";
		image.onload = function(e) {
			drawImage();
			drawScaleText(scaleSlider.value);
		}
	</script>
</html>