首页 > 代码库 > js在web页面上绘制圆形
js在web页面上绘制圆形
在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>
通过以上原理,可以用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://www.mamicode.com/"http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>>由于圆都是绝对定位的,所以对画布中的其他元素的位置不会造成影响,也就是画布中可以放入其他想要的元素,例如图片。
至于实心圆、空心圆,还是透明的圆形,都可以通过css样式来控制,例如只设置border就是空心圆,设置background-color就是实心圆,设置opacity就是透明。
同样的原理,除了圆形之外,还可以画出矩形、正方形,实现难度都比画出圆形要简单的多,大家请自行脑补。
作者:叉叉哥 转载请注明出处:http://blog.csdn.net/xiao__gui/article/details/25594169
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。