在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. Linux应用环境实战10：Bash脚本编程语言中的美学与哲学（转）

    阅读目录 一.一切皆是字符串 二.引用和元字符 三.字符串从哪里来.到哪里去 四.再加上一点点的定义,就可以推导出整个Bash脚本语言的语法了 五.输入输出重定向 六.Bash脚本语言的美学:大道至简 ...

  2. 队列优化和斜率优化的dp

    可以用队列优化或斜率优化的dp这一类的问题为 1D/1D一类问题 即状态数是O(n),决策数也是O(n) 单调队列优化 我们来看这样一个问题:一个含有n项的数列(n<=2000000),求出每一 ...

  3. php函数serialize()与unserialize() 数据序列化与反序列化

    php函数serialize()与unserialize()说明及案例.想要将已序列化的字符串变回 PHP 的值,可使用unserialize().serialize()可处理除了resource之外 ...

  4. php-GD库函数(三)

    <?php //imagefilledellipse — 画一椭圆并填充 /*bool imagefilledellipse ( resource $image , int $cx , int ...

  5. veridata实验例（3）验证veridata发现insert操作不会导致同步

    veridata实验例(3)验证veridata发现insert操作不会导致同步 续接:<veridata实验举例(2)验证表BONUS与表SALGRADE两节点同步情况>,地址:点击打开 ...

  6. EXE文件结构和读取方法

    一.EXE文件概念 EXE File英文全名executable file .译作可运行文件,可移植可运行 (PE) 文件格式的文件,它能够载入到内存中.并由操作系统载入程序运行,是可在操作系统存储空 ...

  7. Eclipse+Maven创建webapp项目<二> （转）

    Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...

  8. Linux注意到Makefile

    规则: 目标 : 依靠 命令 make是怎样工作的: (1)make在当前文件夹下寻找makefile或Makefile. (2)假设找到,他会寻找文件里的第一个目标文件(target).并把这个文件 ...

  9. testlink于smarty配置和使用

    于testlink于,采用smarty首先配置. 一般在过程化的编程中.创建一个smarty.inc.php的文件来配置Smarty的信息,其它文件引入就可以,目的是为了不改动smarty.class ...

  10. Java栈的实例-数组和链表两种方法（转）

    一.栈 栈的定义 栈(Stack)是限制仅在表的一端进行插入和删除运算的线性表. (1)通常称插入.删除的这一端为栈顶 (Top),另一端称为栈底 (Bottom). (2)当表中没有元素时称为空栈. ...