A JavaScript Fancier

伟大的javascript技术研究中...

:: 管理 ::

304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks

早晨醒来突然想写一个画图函数，以前在网上看到有人做过，但都是用VML做的，只有ie支持。
偶这个是用<div>形成的绝对定位的点画出来的，兼容各种浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
    font-size: x-small;
}
</style>
</head>

<body>
<span class="style1">
<script type="text/javascript">
function makedot(x,y){ //画点函数
 document.write("<div style='height:1px;position:absolute;left:"+x+"px;top:"+y+"px;width:1px;background:#f00;overflow:hidden'></div>")
}

/**
 函数功能：根据给定的圆心和半径画圆
 函数思路：根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标，并画出来。
*/
function circle(x,y,r){ //(x,y)圆心，r半径
 var dotx,doty,radio;
 var Pi=Math.PI;
 makedot(x,y);
 for(var i=0;i<360;i+=0.5){
  radio=i*Pi/180;
  dotx=r*Math.cos(radio)+x;
  doty=r*Math.sin(radio)+y
  makedot(dotx,doty);
 }
}

/**
 函数功能：根据指点矩形左上角坐标及长宽绘制矩形。
 函数思路：根据左上坐标及长宽，计算横纵向边每点的坐标
*/
function rect(x,y,w,h){ //(x,y)左上角坐标,w,h 宽与高
 for(var i=0;i<w;i++){
  makedot(x+i,y);
  makedot(x+i,y+h);
 }
 for(var i=0;i<h;i++){
  makedot(x,y+i);
  makedot(x+w,y+i);
 }
}

/**
 函数功能：根据两点坐标画直线。
 函数思路：根据两点的坐标计算机斜率，然后根据第一个点坐标及斜率计算直线上所有点然后画线。垂直线特殊处理
*/
function line(x1,y1,x2,y2){
 var slope=(y2-y1)/(x2-x1); //斜率
 var diff=x2-x1;
 if(x1<x2){
  for(var i=0;i<diff;i++){
   makedot(x1+i,y1+slope*i);
  }
 }else if(x1>x2){
  for(var i=0;i>diff;i--){
   makedot(x1+i,y1+slope*i);
  }
 }else{ //画垂直线
  var temp=y2-y1;
  if(temp>0){
   for(var i=0;i<temp;i++){
    makedot(x1,y1+i);
   }
  }else{
   for(var i=0;i>temp;i--){
    makedot(x1,y1+i);
   }
  }
 }
}

/**
 函数功能：根据给定的三点坐标画三角形
 函数思路：直接利用画线函数画三条线即可
*/
function triangle(x1,y1,x2,y2,x3,y3){
 line(x1,y1,x2,y2);
 line(x2,y2,x3,y3);
 line(x1,y1,x3,y3);
}

/**
 函数功能：根据给定的一系列坐标点画多边形
 函数思路：循环读取坐标点，在当前坐标点与下一坐标点之间连线
*/
function polygon(){
 var args=arguments.length;
 if(args%2!=0) return -1;
 var realargs=args/2; //坐标个数
 for(var i=0;i<realargs-1;i++){
  line(arguments[i*2],arguments[i*2+1],arguments[i*2+2],arguments[i*2+3]);
 }
 line(arguments[i*2],arguments[i*2+1],arguments[0],arguments[1]);
}
circle(500,500,200);
rect(100,100,200,100);
triangle(200,200,100,400,300,400);
polygon(300,300,400,100,600,100,700,300,600,500,400,500);
</script>
</span>
</body>

</html>

posted on 2006-12-03 14:22 Yemoo'S JS Blog 阅读(4036) 评论(5) 编辑收藏引用所属分类: javascript个人作品

# re: 无聊用js写了一个画图函数--兼容FireFox 2006-12-04 13:37 踏雪赤兔

《程序员语录》：给我一个画点函数吧，我就能画出整个世界~ 回复更多评论

# re: 无聊用js写了一个画图函数--兼容FireFox 2007-04-05 15:46 crf

看了你代码深受启发,特此感谢,另我将代码改成用<HR>来划线,效果也可以,且通过扑获鼠标位置实现画图,感觉挺好的,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
font-size: x-small;
}
</style>
</head>

<script type="text/javascript">
var w=1;
var h=1;
var col=black;
function add1()
{
w+=1;
h+=1;

}
function cut1()
{
if(w>1&&h>1)
{
w-=1;
h-=1;
}
}
function catchMouse()
{
//alert('hello');

var x=event.clientX-50;
var y=event.clientY-52;

makedot(x,y);
window.setTimeOut('catchMouse()',3);

}
function makedot(x,y){ //㺯

var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd","<hr style='position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px;color:"+col+";'>");
//document.write("<div style='height:1px;position:absolute;left:"+x+"px;top:"+y+"px;width:2px;background:#f00;overflow:hidden'></div>")
}
function changeColor(a)
{
col=a.value;
}
</script>

<body>

<span id="sspp" onMouseDown="document.onmousemove=catchMouse" onMouseUp="document.onmousemove=null" style="position:absolute;top:50px;left:50px;width:500px;height:500px;background-color:#eeeeee ">

</span>
<form action="">
<input type="button" onClick="add1()" name="add" value="+">
<input type="button" onClick="cut1()" name="cut" value="-">
<select id="col" onChange="changeColor(this)">
<option value="black">black</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="orange">orange</option>
<option value="red">red</option>
<option value="pink">pink</option>
</select>
</form>
</body>

</html>

回复更多评论

# re: 无聊用js写了一个画图函数--兼容FireFox 2007-07-11 13:34 浪迹天涯

博主和这位朋友的脚本我都学习了，写的相当不错啊！只是这位朋友为什么要加一个setTimeout呢？我试了不加的效果，也是不错的呀！

另外我有个问题：在FireFox中，为什么event.button,(event = event ? event : (window.event ? window.event : null);这样的方式拿到的)的值一直是0呢？
回复更多评论

# re: 无聊用js写了一个画图函数--兼容FireFox 2008-04-02 08:27 denni_hxc

setTimeout(函数名,毫秒)
回复更多评论

# re: 无聊用js写了一个画图函数--兼容FireFox 2009-10-19 19:26 信软计算机有限公司

上的方法我们实现过，确实很有趣。不过我们也遇到了一个问题，就是页面占用很多内存。画第一笔的时候，很流畅，以后的几笔就有点迟钝了。不知道您是否也遇到过类似的问题。回复更多评论

刷新评论列表

只有注册用户登录后才能发表评论。

A JavaScript Fancier

公告

常用链接

留言簿(26)

随笔分类

随笔档案

Ajax技术站点

javascript学习站点

JS高人Blog

Ruby&&Ajax框架

Web技术站点

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

评论