文档章节

JS画椭圆

 喔嗨哟
发布于 2014/05/30 09:40
字数 410
阅读 19
收藏 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小游戏——请画一个小人。 创意是一款游戏最有价值的属性。再简单、再小的游...

虫虫
2011/10/27
2K
10
JavaScript 创意游戏:请画一个小人

有温馨,有刺激,有探险,有英雄,有喷火龙,有大鲨鱼。这是一部电影吗?不,我说的只是一个很小很小的JavaScript小游戏——请画一个小人。 创意是一款游戏最有价值的属性。再简单、再小的游...

红薯
2011/10/21
5.3K
32
使用excanvas.js实现拓扑功能

最近看了一下excanvas.js,感觉是个好东西。 一直想用js实现拓扑功能,正好试一下。我用的是最新版的excanvas.js,还使用到了jquery和jquery ui的最新版。 效果图如下 四个节点都可以用鼠标拖...

红薯
2011/11/05
4.5K
0
10 个非常有用的 SVG 动画的 JavaScript 库

SVG 通常可以用作跨分辨率视频。这意味着在一块高分屏幕上不会降低图片的锐度。此外,你甚至可以让SVG动起来,通过使用一些javascript类库。下面,我们分享一些javascript类库,这些类库会帮...

oschina
2015/02/12
12.8K
12
SVG(可扩展矢量图)系列教程

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

waylau
2014/05/30
0
4

没有更多内容

加载失败,请刷新页面

加载更多

中国龙-扬科
26分钟前
2
0
使用vuex的state状态对象的5种方式

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。 下面给大家来贴一下我的vuex的结构 下面是store文件夹下的state.js和index.js内容 //state.jsconst state =...

peakedness丶
29分钟前
2
0
NetCore MVC Demo

地址:http://114.116.9.72:5411

whltian
37分钟前
1
0
Netty handle方法周期 (四)

写了一个练习之后,发现自定义的助手类每次肯定是必须的,对于不同的业务逻辑需求,会写相对应的逻辑 最简单的查看Handle生命周期的方式,就是重写上级方法,看名字差不多应该可以知道方法的作用 ...

_大侠__
42分钟前
9
0
vue主动刷新页面及列表数据删除后的刷新实例

1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者...

前端小攻略
52分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部