第四章 JavaScript画图效果--三角形、六角形

<script type="text/javascript"> function makedot(x,y){ //画点函数 document.write("

") } 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{ //画垂直线 var temp=y2-y1; if(temp>0){ 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

JavaScript代码：

　function makedot(x,y){
　　document.write("<div style='height:2px; position:absolute; left:"+x+"px; top:"+y+"px; width:2px; background:#f00;overflow:hidden'></div>")
　}
　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]);
　}
　triangle(200,200,100,400,300,400);
　polygon(300,300,400,100,600,100,700,300,600,500,400,500);

JavaScript代码讲解：

function makedot(x,y){ 　　document.write("<div style='height:2px; position:absolute; left:"+x+"px; top:"+y+"px; width:2px; background:#f00; overflow:hidden'> </div>") 　}	定义画点函数makedot(x,y),宽和高为2像素，页面坐标左边为xpx;顶ypx
function line(x1,y1,x2,y2){	定义直线函数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); 　　} 　}	设定斜率变量slope 根据两点的坐标计算机斜率，然后根据第一个点坐标及斜率计算直线上所有点然后画线
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); 　　　}}}}	当x1=x2时，画垂直线。
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]); 　}	函数功能：根据给定的一系列坐标点画多边形 函数思路：循环读取坐标点，在当前坐标点与下一坐标点之间连线
triangle(200,200,100,400,300,400); 　polygon(300,300,400,100,600,100,700,300,600,500,400,500);	三角形与六角形指定数据