A JavaScript Fancier

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

  IT博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks

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

posted on 2006-12-03 14:22 Yemoo'S JS Blog 阅读(4053) 评论(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 信软计算机有限公司
上的方法我们实现过,确实很有趣。不过我们也遇到了一个问题,就是页面占用很多内存。 画第一笔的时候,很流畅,以后的几笔就有点迟钝了。不知道您是否也遇到过类似的问题。  回复  更多评论
  

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