在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. JavaScript的作用域和变量对象

    变量对象 先来说说什么是变量对象.变量对象中又存储了什么东西吧. JavaScript中的运行环境包含全局运行环境和函数运行环境这两种,每进入到一个运行环境都会创建一个变量对象,这个对象中记录了在当前 ...

  2. Java EE (8) -- Java EE Patterns

    Java EE 模式目录由以下三个层组成: –     整合层(4) –     业务层(9) –     表示层(8) 涉及 Java EE 平台代码与其它类型应用程序或遗留系统的集成: 服务激活器 ...

  3. ORACLE 中的 锁 介绍

    ORACLE 中的 锁 介绍 Oracle数据库支持多个用户同时与数据库进行交互,每个用户都可以同时运行自己的事务,从而也需要对并发访问进行控制.Oracle也是用“锁”的机制来防止各个事务之间的相互 ...

  4. HDU 1856 More is better（并查集+离散化）

    题目地址:HDU 1856 水题.因为标号范围太大,而数据数仅仅有10w,所以要先进行离散化.然后就是裸的并查集了. 代码例如以下: #include <iostream> #includ ...

  5. POJ 2417 Discrete Logging 离散对数

    链接:http://poj.org/problem?id=2417 题意: 思路:求离散对数,Baby Step Giant Step算法基本应用. 下面转载自:AekdyCoin [普通Baby S ...

  6. 安卓的sqlite增删改

    基于安卓的sqlite增删改,笔记学习: 1.使用LinearLayout 布局生成,增删改的页面如图 代码布局如下: <LinearLayout xmlns:android="htt ...

  7. linux上安装配置vsftpd(转)

    转自:http://www.webarch.org/category/linux生产环境是Centos5.6,由于需要提供ftp服务,就找了一款比较小巧的ftp服务器端软件,vsftpd(vsftpd ...

  8. 设计Mysql索引的原则

    1. 搜索的索引列,不一定是所要选择的列.换句话说,最适合索引的列是出如今WHERE 子句中的列,或连接子句中指定的列,而不是出如今SELECT keyword后的选择列表中的列. 2. 使用惟一索引 ...

  9. 新浪微博id的62进制转换

    某条微博链接 某条微博的链接如下,同样省略了后面的无关参数 http://weibo.com/2803301701/CeaOU15IT CeaOU15IT为这条微博的mid,与之相对应的还有一个id, ...

  10. QoS令牌桶工作原理

    QoS的一个重要作用就是对port流量进行监管,也就是限制port流量.但QoS是怎样做到这点的呢?那就是QoS的令牌桶机制了.以下是在笔者刚刚出版的<Cisco/H3C交换机高级配置与管理技术 ...