您的当前位置：首页 JS画图(非VML)--兼容IE/FF_javascript技巧

JS画图(非VML)--兼容IE/FF_javascript技巧

来源：亿欧教育网

<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> 
 
 
function makedot(x,y){ //画点函数 
 document.write("") 
} 
/** 
 函数功能：根据给定的圆心和半径画圆 
 函数思路：根据半径及圆心坐标利用数学方法计算从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> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]