在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. leetcode:linked_list_cycle_II

    一.     题目 给定一个链表,假设链表中有环则返回环的開始节点,否则返回NULL.要求不用额外的空间完毕. 二.     分析 在I中,我们推断环的存在,即用slow和fast两个指针,设定步长f ...

  2. docker 现实---中小企业docker环境结构(五）

    docker对于中小企业,设定paas他没有足够的能量,没有必要为,个人二手sandbox实用性和小点.我个人觉得,中小企业可以使用docker要规范发展.测试.生产环境. 他画了一个简单的图表: d ...

  3. 给节点设置tag【从零開始cocos3.0final 】

    在cocos中通过tag来管理节点是非经常常使用的:以下介绍一个关于在cocos中使用tag的实例: typedef enum{ tag1 }Tag; 这里能够使用枚举类型,来为多个节点设置tag: ...

  4. 【C语言探险】 第四课的第二部分：串

    内容简单介绍 1.课程大纲 2.第二部分第四课: 字符串 3.第二部分第五课预告: 预处理 课程大纲 我们的课程分为四大部分,每个部分结束后都会有练习题,并会发布答案.还会带大家用C语言编写三个游戏. ...

  5. FastDFS源代码分析之tracker协议分析

    本篇博客主要解说fastdfs中tracker协议的解说. fastdfs主要是存储文件.直接把整个文件存储到磁盘上,所以.简单直接.可是也有非常大的局限性. 因此,fastdfs对文件的文件夹设置和 ...

  6. POJ1274 The Perfect Stall【二部图最大匹配】

    主题链接: id=1274">http://poj.org/problem? id=1274 题目大意: 有N头奶牛(编号1~N)和M个牛棚(编号1~M). 每头牛仅仅可产一次奶.每一 ...

  7. Lucene40SkipListWriter

    多级跳跃表是保存在tim文件里的. tip是term index,tim是term dictionary.记忆方法是,p是pointer因此是term index. 这个类会保存多个level的las ...

  8. Blend4精选案例图解教程（四）：请给我路径指引

    原文:Blend4精选案例图解教程(四):请给我路径指引 路径在界面设计中,可以起到很好的辅助作用,我常常使用它来对元素进行规则排列和非规则排列控制. 本次教程将演示,Blend中路径的常规用法. 1 ...

  9. DataGridView大扩展——显示行号

    原文 DataGridView大扩展——显示行号 在DataGridView 的实际使用中,经常需要标示出行号,这样可以比较醒目地看到当前信息.不过DataGridView 在绘制 DataGridV ...

  10. Xamarin.Android 使用 SQLiteOpenHelper 进行数据库操作

    一.前言 在手机中进行网络连接不仅是耗时也是耗电的,而耗电却是致命的.所以我们就需要数据库帮助我们存储离线数据,以便在用户未使用网络的情况下也可以能够使用应用的部分功能,而在需要网络连接的功能上采用提 ...