本文介绍了一种不依赖SVG或canvas，在web页面上使用div和jQuery绘制圆形的方法。通过设置div的border-radius为半径，结合absolute定位，可以实现鼠标拖动绘制圆的功能。圆的样式如实心、空心、透明等可通过CSS控制，且不会影响画布上的其他元素。此方法同样适用于绘制矩形和正方形。
在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>
最低0.47元/天 解锁文章
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
