橡皮筋式选取图片放大-Canvas学习第四天

最新推荐文章于 2019-08-22 12:45:20 发布

RisaSama

最新推荐文章于 2019-08-22 12:45:20 发布

阅读量249

点赞数

分类专栏：网页学习文章标签： HTML JavaScript canvas

本文链接：https://blog.csdn.net/RisaSama/article/details/90167519

版权

效果是，放入一张图片，然后截取某个区域就会将该区域放大。
HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rubber bands with layered element</title>
 <style>
 	body {
 		background: rgba(100, 145, 250, 0.3);
 	}
 	
 	#canvas {
 		margin-left: 20px;
 		margin-right: 0;
 		margin-bottom: 20px;
 		border: thin solid #aaaaaa;
 		cursor: crosshair;
 		padding: 0;
 	}
 	
 	#controls {
 		margin: 20px 0px 20px 20px;
 	}
 	
 	#rubberbandDiv {
 		position: absolute;
 		border: 3px solid blue;
 		cursor: crosshair;
 		display: none;
 	}
 		
 </style>
</head>
<body>
	<div id='controls'>
		<input type='button' id='resetButton' value='Reset' />
	</div>
	
	<div id='rubberbandDiv'></div>
	
	<canvas id='canvas' width = '800' height='520'>
		Canvas not supported
	</canvas

最低0.47元/天解锁文章

RisaSama

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
橡皮筋式选取图片放大-Canvas学习第四天

效果是，放入一张图片，然后截取某个区域就会将该区域放大。HTML代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Rubber bands with layered element</title> <style> body { ...
复制链接

扫一扫