js在web页面上绘制圆形
2020-12-13 03:04
YPE html>
标签：jquery 画圆 javascript 绝对定位 absolute
在web页面上，想要画出一个圆形，方法有很多，SVG、canvas都可以绘图。但是本文不采用这两种方式，而是使用一个div。div一般是一个矩形，但是如果设置一个圆角样式border-radius就可以将div变成圆形。
圆的位置需要在画布中绝对定位（position: absolute），也就是通过设置X、Y坐标在定位，对应的css样式是left、top。想要圆的绝对定位起效，画布就要设置position:relative。
通过以上原理，可以用jQuery实现这样一个交互：用鼠标在画布上按下左键拖动的方式来绘制圆，圆心是鼠标按下的位置，鼠标左键松开圆绘制完成。
由于圆都是绝对定位的，所以对画布中的其他元素的位置不会造成影响，也就是画布中可以放入其他想要的元素，例如图片。
至于实心圆、空心圆，还是透明的圆形，都可以通过css样式来控制，例如只设置border就是空心圆，设置background-color就是实心圆，设置opacity就是透明。
同样的原理，除了圆形之外，还可以画出矩形、正方形，实现难度都比画出圆形要简单的多，大家请自行脑补。
作者：叉叉哥 转载请注明出处：http://blog.csdn.net/xiao__gui/article/details/25594169
js在web页面上绘制圆形,搜素材,soscw.com
js在web页面上绘制圆形
标签：jquery 画圆 javascript 绝对定位 absolute
原文地址：http://blog.csdn.net/xiao__gui/article/details/25594169