js在web页面上绘制圆形

时间：2014-05-14 01:01:17 收藏：0 阅读：364

在web页面上，想要画出一个圆形，方法有很多，SVG、canvas都可以绘图。但是本文不采用这两种方式，而是使用一个div。div一般是一个矩形，但是如果设置一个圆角样式border-radius就可以将div变成圆形。

圆的位置需要在画布中绝对定位（position: absolute），也就是通过设置X、Y坐标在定位，对应的css样式是left、top。想要圆的绝对定位起效，画布就要设置position:relative。

<!DOCTYPE html>
<html>
<head>
<style>
	#drawing {
		width: 500px;
		height: 500px;
		border:1px solid;
		position: relative;
	}

	.circle {
		background-color: green;
		position: absolute;
	}
</style>
</head>
<body>
	<div id="drawing">
		<div class="circle" style="width: 50px; height: 50px; border-radius: 25px; left: 200px; top: 100px;"></div>
	</div>
</body>
</html>

bubuko.com,布布扣

通过以上原理，可以用jQuery实现这样一个交互：用鼠标在画布上按下左键拖动的方式来绘制圆，圆心是鼠标按下的位置，鼠标左键松开圆绘制完成。

<!DOCTYPE html>
<html>
<head>
<style>
	#drawing {
		width: 500px;
		height: 500px;
		border:1px solid;
		position: relative;
		overflow: hidden;
	}

	.circle {
		background-color: green;
		position: absolute;
	}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
	$(document).ready(function() {

		// 圆
		var $circle = null;

		// 画布
		var $drawing = $("#drawing");

		// 圆心位置
		var centerX = 0;
		var centerY = 0;

		// 是否正在画圆
		var isDrawing = false;

		// 按下鼠标开始画圆
		$drawing.mousedown(function(event) {
			$circle = $(‘<div class="circle"></div>‘);
			centerX = event.pageX - $drawing.offset().left;
			centerY = event.pageY - $drawing.offset().top;
			$(this).append($circle);
			isDrawing = true;
			event.preventDefault();
		});

		// 鼠标拖动
		$(document).mousemove(function(event) {
			if(isDrawing) {
				var radiusX = Math.abs(event.pageX - $drawing.offset().left - centerX);
				var radiusY = Math.abs(event.pageY - $drawing.offset().top - centerY);
				var radius = Math.sqrt(radiusX * radiusX + radiusY * radiusY); // 半径，勾股定理
				
				// 下面四个条件判断是限制圆不能超出画布区域，如果不需要这个限制可以去掉这段代码
				if(centerX - radius < 0) {
					radius = centerX;
				}
				if(centerY - radius < 0) {
					radius = centerY;
				}
				if(centerX + radius > $drawing.width()) {
					radius = $drawing.width() - centerX;
				}
				if(centerY + radius > $drawing.height()) {
					radius =  $drawing.height() - centerY;
				}

				// 设置圆的大小和位置
				$circle.css("left", centerX - radius + "px");
				$circle.css("top", centerY - radius + "px");
				$circle.css("width", 2 * radius + "px");
				$circle.css("height", 2 * radius + "px");
				$circle.css("border-radius", radius + "px");
			}
		});

		// 鼠标松开停止画圆
		$(document).mouseup(function() {
			isDrawing = false;
		});
	});
</script>
</head>
<body>
	<div id="drawing">
	</div>
</body>
</html>

由于圆都是绝对定位的，所以对画布中的其他元素的位置不会造成影响，也就是画布中可以放入其他想要的元素，例如图片。

至于实心圆、空心圆，还是透明的圆形，都可以通过css样式来控制，例如只设置border就是空心圆，设置background-color就是实心圆，设置opacity就是透明。

同样的原理，除了圆形之外，还可以画出矩形、正方形，实现难度都比画出圆形要简单的多，大家请自行脑补。

作者：叉叉哥转载请注明出处：http://blog.csdn.net/xiao__gui/article/details/25594169

js在web页面上绘制圆形,布布扣,bubuko.com