在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. 开放搜索服务OpenSearch

    开放搜索服务系统架构:从系统.平台到开放服务 搜索是各类网站和数据类APP的标配功能.目前开发者一般基于开源搜索系统,例如ElasticSearch.Solr.Sphinx等自己搭建搜索服务,系统定制 ...

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

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

  3. 潜水JVM

    原文地址:http://blog.jamesdbloom.com/JVMInternals.html(转载请注明出处和本文地址英文原文) 本文简要解析JVM的内部结构.下图显示了一个典型的一块JVM( ...

  4. 多线程——达到Runnable介面

    部分博客(多线程--继承Thread类)介绍了java多线程的第一种实现方法--继承Thread类.这篇博客介绍另外一种方法--实现Runnable接口,并实现run方法. 还用上篇博客的样例.如今用 ...

  5. WPF对于xml的简单操作（下）绑定ListView

    上个月做好的,电脑给盗了,没及时存在网盘,也及时发到随笔,于是乎悲哉!搞了一个上午终于绑定好了,有时候就是这么眼瞎,Path和XPath全瞎了,摸滚了一个上午,赶紧的随笔跟上先. <ListVi ...

  6. Locked ownable synchronizers（转）

    public class DeadLock { public static void main(final String[] args) throws Exception { final Object ...

  7. Java实现BASE64编解码器

    Java实现BASE64编解码器 笔者:chszs,转载注明.博客首页:http://blog.csdn.net/chszs BASE64和其它类似的编码算法通经常使用于转换二进制数据为文本数据,其目 ...

  8. 采用Eclipse中间Maven构建Web项目错误（一）

    采用Eclipse中间Maven构建Web工程 1.在进行上述操作时.pom.xml一直报错 <project xmlns="http://maven.apache.org/POM/4 ...

  9. 应用层协议系列（两）——HTTPserver之http协议分析

    上一篇文章<抄nginx Httpserver设计与实现(一)--多进程和多通道IO现>中实现了一个仿照nginx的支持高并发的server.但仅仅是实现了port监听和数据接收.并没有实 ...

  10. 生命游戏（两），有一种东西叫CCScrollView

    订婚app要么game'肯定不会陌生:CCScrollView并且CCTableView. 假如我不知道是什么CCScrollView,再看看testcpp要么testlua样品棒. 先说说CCScr ...