在web页面上，想要画出一个圆形，方法有很多，SVG、canvas都可以绘图。但是本文不采用这两种方式，而是使用一个div。div一般是一个矩形，但是如果设置一个圆角样式border-radius就可以将div变成圆形。
圆的位置需要在画布中绝对定位（position: absolute），也就是通过设置X、Y坐标在定位，对应的css样式是left、top。想要圆的绝对定位起效，画布就要设置position:relative。
通过以上原理，可以用jQuery实现这样一个交互：用鼠标在画布上按下左键拖动的方式来绘制圆，圆心是鼠标按下的位置，鼠标左键松开圆绘制完成。
<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 = $(''); 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》
由于圆都是绝对定位的，所以对画布中的其他元素的位置不会造成影响，也就是画布中可以放入其他想要的元素，例如图片。
至于实心圆、空心圆，还是透明的圆形，都可以通过css样式来控制，例如只设置border就是空心圆，设置background-color就是实心圆，设置opacity就是透明。
同样的原理，除了圆形之外，还可以画出矩形、正方形，实现难度都比画出圆形要简单的多，大家请自行脑补。
