文档章节

JS画椭圆

 喔嗨哟
发布于 2014/05/30 09:40
字数 410
阅读 18
收藏 0
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset=utf-8>
<title>椭圆曲线</title>
</head>
<style>
*{
margin:0px;padding:0px; 
}
div{
border:1px solid #111;
}
.points{
width:1px;height:1px;border:0px solid #111;
position:absolute;
line-height:1px;font-size:1px;
background:#111;
}
.go-oval{
width:10px;height:10px;border:0px solid #111;
position:absolute;
line-height:1px;font-size:1px;
background:#111;
border-radius:5px;
}
</style>
<body>
 <div style="position:absolute;left:80px;top:30px;height:500px;width:500px;">
  <div id="tuoyuan1" style="height:500px;width:500px;"></div>
  <div id="go-oval1" class="go-oval"></div>
 </div>
 
 <div style="position:absolute;left:800px;top:130px;height:500px;width:900px;">
  <div id="tuoyuan2" style="height:500px;width:900px;"></div>
  <div id="go-oval2" class="go-oval"></div>
 </div>
</body>
</html>
<script>
(function(){
 function $(idd){
  var obj = {};
  if( typeof( idd ) === 'string'){
   var idName = idd.substr(1, idd.length );
   if( idd.substr(0,1) === '#' ){
    obj = document.getElementById(idName);
   }
   else if( idd.substr(0,1) === '.'){
    obj =  document.getElementsByName(idName);
   }
   else if( idd == 'document' ){
    obj = document;
   }
   else {
    obj = document.getElementsByTagName(idd);
   }
  }
  else {
   obj = idd;
  }
  return obj;
 }
 
 
 /**
 *生成椭圆曲线的点(数组)
 *a 椭圆长半轴长
 *b 椭圆短半轴长
 *interval 点的密集成都
 *addX 相对于DIV左上角的X坐标
 *addY 相对于DIV左上角的Y坐标
 */
 function make_points(a, b, interval, addX, addY){
  var x,y;
  var xy = [],xy1 = [],xy2 = [];
  
  addX = addX ? addX : a;
  addY = addY ? addY : b;
  
  x = - Math.sqrt( (b*b)*a*a/(b*b) );
  
  for(var n = 0; 1; n ++){
   y = Math.sqrt( b*b - (b*b*x*x)/(a*a) );
   
   if( n == 0 ){
    y0 = y;
   }
   
   xy1[n] = [x + addX,y + addY];
   xy2[n] = [x + addX,-y + addY];
   x = x + interval;
   
   if( x > Math.sqrt( (b*b)*a*a/(b*b) ) ){
    break;
   }
  }
  
  for(var n = 0, n2 = len = xy2.length - 1 ; n <= len; n ++, n2--){
   xy[n] = xy2[n2];
  }
  
  xy = xy1.concat(xy);
  
  return xy;
 }
 
 //画椭圆曲线
 function draw_oval(points){
  var len = points.length;
  var divs = '';
  
  for(var n = 0; n < len; n ++){
   divs += '<div class="points" style="left:'+ points[n][0] +'px;top:'+ points[n][1] +'px;"></div>';
  }
  
  return divs;
 }
 
 window.onload = function(){
  var points1 = make_points(50,100,0.01,200,200);
  var points2 = make_points(200,100,1);
  //画椭圆曲线
  $('#tuoyuan1').innerHTML =  draw_oval( points1 );
  $('#tuoyuan2').innerHTML =  draw_oval( points2 );
  
 };
 
})();
</script>

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 1
码字总数 410
作品 0
成都
程序员
JavaScript自学手册文档教程

教程链接:JavaScript自学手册文档教程 javascript只需知道其能处理哪些东西: 1:操作控件 2:子窗口,父窗口,模式窗口 3:内置函数和对象,String相关的处理函数,Math对象(包括常用数学...

mcy0425
06/07
0
0
SVG(可扩展矢量图)系列教程

本系列教程同步至博客www.waylau.com 从新往久排序,持续更新 SVG与JS交互实例之画板 SVG <marker>创建箭头 SVG实例之中国地图 SVG实例之电力开关 SVG Animation动画 SVG Gradients之Radial ...

waylau
2014/05/30
0
4
cufon,在网页上画出特殊字体

设计师们有时会使用特殊字体让网页更好看,但浏览器通常只支持Arial、Helvetica等通用字体。那么通常的解决办法就是将特殊字体做成图片。如果要动态生成文字内容怎么办?那也许只有使用CSS3的...

Lofo
2013/09/27
0
0
JavaScript变量作用域与闭包实现

先抛出原问题: for (var i = 0; i < 10; i++) {divs[i].onmouseover = function () { this.style.backgroundColor = "red"; this.style.left = -55i; };} 测试结果显示:鼠标经过所有div时......

cjp路人
2014/03/21
0
0
从小数学就不及格的我,竟然用极坐标系表白了我的女神!(附代码)

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由郭诗雅发表于云+社区专栏 在数学中,极坐标系(英语:Polar coordinate system)是一个二维坐标系统。该坐标系统中任意位置...

腾讯云加社区
前天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

redis 系列一 -- 简介及安装

1.简介 redis -- remote dictionary server 远程字典服务 使用 C 语言编写; 高性能的 key-value数据库; 内存数据库,支持数据持久化。 Redis 是一个开源(BSD许可)的,内存中的数据结构存...

imbiao
33分钟前
1
0
nginx log记录请求响应时间

有时为了方便分析接口性能等,需要记录请求的时长,通过修改nginx的日志格式可以做到,如 添加一个新的log_format log_format timed_combined '$remote_addr - $remote_user [$time_local] "...

swingcoder
56分钟前
2
0
Spring MVC之RequestMappingHandlerMapping匹配

对于RequestMappingHandlerMapping,使用Spring的同学基本都不会陌生,该类的作用有两个: 通过request查找对应的HandlerMethod,即当前request具体是由Controller中的哪个方法进行处理; 查...

爱宝贝丶
今天
2
0
Java Web--增删改查之二界面后台java代码(转载参考)

/** *  *//** * @author Administrator * */package dao; import java.sql.*;public class DBConn {/** * 链接数据库 * @return */  ...

小橙子的曼曼
今天
2
0
Redis源码阅读笔记-对象及其类型和编码

总结之《Redis设计与实现》 对象 Redis中是使用对象来便是数据库中的键和值。 结构 // server.h...#define LRU_BITS 24...typedef struct redisObject { unsigned type:4; ...

Jian_Ming
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部