JS画图(非VML)--兼容IE/FF- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS画图(非VML)--兼容IE/FF

Javascript: JavaScript如何重构嵌套循环和递归; JS应用在Firebug中的扩展架构模式; 提升JS性能：将递归转换为迭代; IE7浏览器下缩放图片失真问题; JavaScript对DOM进行操作的指导性原则; JavaScript有趣实例:胸罩罩杯尺寸计算器; Firefox的Firebug扩展：FireScope; Mozilla的JavaScript引擎__noSuchMethod__()方法; JavaScript+CSS制作的网站导航菜单; javascript的私有成员(private); Javascript绘制分析曲线图; ie6使用js支持hover伪类; 收集的25个下拉网页菜单特效Javascript脚本; Javascript框架的自定义事件; 总结Javascript调用函数的方法; JS教程:call、apply、callee用法; JS教程:数组类型检测和集合检测; 兼容FF的设为首页与收藏网站的JS代码; Javascript教程:PopUp对象; JS读写Cookie以及设置过期时间

No. « ‹ 171 172 173 174 › »

技术文章搜索

关键字

Javascript 中的 JS画图(非VML)--兼容IE/FF

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 419 ::

收藏到网摘: n/a

鼠标移动到一张图片时变为另一张图片基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼

点击运行可以看到效果:

<!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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

鼠标移动到一张图片时变为另一张图片基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼

Javascript 中的 JS画图(非VML)--兼容IE/FF

评论 (0) All