在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>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb19fZ3Vp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

通过以上原理。能够用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绘制在页上的圆的更多相关文章

  1. 基于Node.js的web聊天系统 - 真正意义上的web实时聊天系统

    简单介绍一下这个实时web聊天系统的功能,首先进入系统的人填入名字和邮件地址后会获取到一个由系统创建的URL地址,你可以把这个地址发给另外一个人,另外一个人进入系统后就可以和你进行实时的聊天对话咯.主 ...

  2. mobilebone.js 移动web APP单页切换骨架

    轻便体积小 原生无依赖 插件可扩展 设计无限制 动效可定制 动静两相宜 能进亦能退 桌面也兼修 一句话功能简介跟传统网页浏览的差别仅仅在于无刷新! 例如,我们浏览首页,首页上有个如下HTML链接: & ...

  3. js中的referrer使用,返回上一页

    js完整代码: <script language="javascript"> var refer=document. referrer ;     document.g ...

  4. 用js实现web端录屏

    用js实现web端录屏 原创2021-11-14 09:30·无意义的路过 随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们 ...

  5. 快速使用node.js进行web开发

    首先关于node.js的学习,这里推荐一本比较好的教程,nodejs web开发指南,该书通俗易懂地将node.js语言特性讲解完之后,又从一个项目角度带领读者使用node.js学习web开发.相信这 ...

  6. Beaglebone Black– 智能家居控制系统 LAS - 网页服务器 Node.js 、Web Service、页面 和 TCP 请求转 UDP 发送

    上一篇,纯粹玩 ESP8266,写入了 init.lua 能收发 UDP.这次拿 BBB 开刀,用 BBB host 一个 web server ,用于与用户交互,数据来自 ESP8266 的 UDP ...

  7. [开源]基于goapp+xterm实现webssh-网页上的SSH终端(golang)

    简析 基于goapp+xterm实现webssh-网页上的SSH终端. 开源地址见文末. 特性 在网页上实现一个SSH终端.从而无需Xshell之类的模拟终端工具进行SSH连接. 可以对交互命令进行审 ...

  8. At.js – 用于 Web 应用程序的自动完成库

    At.js 是一个自动完成库,用来实现自动完成提示,表情等,就像你在 Github 或 Twitter 上看到的一样.它支持 HTML5 contentEditable 元素.你可以听任何字符,而不仅 ...

  9. Dynamic CRM 2013学习笔记（二十五）JS调用web service 实现多条记录复制(克隆)功能

    前面介绍过如何克隆一条当前的记录: Dynamic CRM 2013学习笔记(十四)复制/克隆记录 , 主要是通过界面上加一个字段,单击form上的clone 按钮时,改变这个字段的值以触发插件来实现 ...

随机推荐

  1. OCP读书笔记(20) - 复制数据库

    没有连接到target的复制 将orcl数据库的备份复制为orcl1 一.创建orcl的备份: run{ backup database plus archivelog;} 二.复制数据库为orcl1 ...

  2. NodeJS - Express4.0错误：Cannot read property &amp;#39;Store&amp;#39; of undefined

    Express在使用mongodb的时候app配置出错 //settings.js module.exports={ cookieSecret:"xxxx", db:"d ...

  3. 开源Office Word——DocX

    1.前言 请阅读前请看以下这位大神的文章 http://www.cnblogs.com/asxinyu/archive/2013/02/22/2921861.html 另附两个附件 1.DocX.DL ...

  4. 轻量级分布式RPC框架

    随笔- 139  文章- 0  评论- 387  一个轻量级分布式RPC框架--NettyRpc   1.背景 最近在搜索Netty和Zookeeper方面的文章时,看到了这篇文章<轻量级分布式 ...

  5. mybatis与mysql插入时返回主键id的值

    <insert id="insertCharge" parameterType="com.bb.bean.Rechargerecord"> < ...

  6. [Windows Phone] 导览控制项（Navigation controls）

    原文:[Windows Phone] 导览控制项(Navigation controls) [前言] 如果应用程式只有单一页面,在画面呈现上可能会让使用者容易没有新鲜感,这个范例是使用导览控制项(Na ...

  7. Scripting Java #3：Groovy与invokedynamic

    只需看看今天Groovy语言实现机制.在此之前,是第一个推倒静态类型与动态类型语言在实现上面的一些差异. 静态类型 vs. 动态类型 看以下这个简单的栗子. def addtwo(a, b) { re ...

  8. .NET Core 1.0、ASP.NET Core 1.0和EF Core 1.0简介

    .NET Core 1.0.ASP.NET Core 1.0和EF Core 1.0简介 英文原文:Reintroducing .NET Core 1.0, ASP.NET Core 1.0, and ...

  9. Java Web整合开发(附录1) - 安装配置环境

    1. Install JDK http://blog.csdn.net/sonnet123/article/details/9169741 Download JDK http://www.oracle ...

  10. Acdreamoj1115(数学思维称号)

    意甲冠军:1,3是完美的数,假定a,b是完美的数,然后,2+a*b+2*a+2*b,结论认为,n无论是完美的数字. 解法:開始仅仅看出来2+a*b+2*a+2*b=(a+2)*(b+2)-2,没推出很 ...