canvas 图片中心缩放控制_canvas 中心点放大-CSDN博客

本文链接：https://blog.csdn.net/qq_30529627/article/details/51222487

本文介绍如何利用HTML5的canvas元素，实现图片的中心缩放操作，详细讲解了canvas的基本用法和图片处理技巧，包括计算缩放比例、设置变换原点等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片中心缩放</title>
	</head>
	<style>
		body{background: #666;margin: 0;padding: 0;	}
		input{
		    display: block;
		    margin: 20px auto;
    		}
input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}    		
	</style>
	<body>
		<canvas id="kycanvas" style="display: block;margin:0 auto; border: 1px solid darksalmon;margin-top: 100px;">
			当前浏览器不支持canvas，请更换浏览器后再试！
		</canvas>
		<canvas id="watermark" style="display: none;"></canvas>
		<input id="scale-range" min="0.5" max="3.0" step="0.01" value="1" type="range"/>
	</body>
	<script>
		var canvas = document.getElementById("kycanvas");//选取画布
		var context = canvas.getContext("2d");//创建context对象
		var canvawater = document.getElementById("watermark");
		var contextwater = canvawater.getContext("2d");
		var slider = document.getElementById("scale-range");//选取滑杆
		var image = new Image();
		window.onload = function (){
			canvas.width = 400;//画布宽
			canvas.height = 400;	//画布高	
			var scale = slider.value;//缩放
			image.src = "images/im1.jpg";//图片地址
			image.onload = function(){ //图片加载完毕
				drawImageByScale(scale);
				slider.onmousemove = function (){//鼠标事件
					scale = slider.value;
					drawImageByScale(scale);
				}
			}
			contextwater.font = "bold 50px Arial";
			contextwater.fillStyle = "rgab(255,255,255,0.5)";
			contextwater.textBaseline = "middle";
			contextwater.fillText("zbx",200,130)
			
			
		};
		function drawImageByScale(scale){	
			var imageWidth = 400 * scale;
			var imageHeight = 400 * scale;
			var dx = canvas.width /2 - imageWidth/2;
			var dy = canvas.height/2 - imageHeight/2;
			//每次执行先清除画布
			context.clearRect(0,0,canvas.width,canvas.height)
			//调用画布绘图
			context.drawImage(image ,dx,dy,imageWidth,imageHeight);
			context.drawImage(canvawater,canvas.width - canvawater.width,
										   canvas.height - canvawater.height);
		}
	</script>
</html>