第四章 JavaScript画图效果--画斜线

效 果 演 示：

JavaScript代码：

　function HTMLDrawLine(){
　　divdraw.innerHTML=drawLine(150,250,450,300,"red")+drawLine(350,150,509,450,"black");}
　function drawLine(x0,y0,x1,y1,color) {
　　var linespan="";
　　if (y0 == y1){
　　　if (x0>x1) {
　　　　var t=x0;
　　　　x0=x1;
　　　　x1=t;
　　　}
　　　linespan=" <span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";height:1;width:"+Math.abs(x1-x0)+"'> </span>";
　　}else if (x0==x1){
　　　if (y0>y1){
　　　　var t=y0;
　　　　y0=y1;
　　　　y1=t;
　　　}
　　　linespan=" <span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";width:1;height:"+Math.abs(y1-y0)+"'> </span>";
　　}else{
　　　var lx=x1-x0;
　　　var ly=y1-y0;
　　　var j=Math.sqrt(lx*lx+ly*ly);
　　　linespan=new Array();
　　　for (var i=0;i <j;i+=1){
　　　　var p=i/j;
　　　　var px=parseInt(x0+lx*p);
　　　　var py=parseInt(y0+ly*p);
　　　　linespan[linespan.length]=" <span style='top:"+py+";left:"+px+";height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"'> </span>";
　　　}
　　linespan=linespan.join("");
　}
　return linespan;
}

JavaScript代码讲解：

function HTMLDrawLine(){ 　divdraw.innerHTML=drawLine(150,250,450,300,"red")+drawLine(350,150,509,450,"black"); }	设置两个斜线的坐标,斜线的颜色
function drawLine(x0,y0,x1,y1,color) { var linespan="";	绘制斜线的功能函数, x0,y0开始画线的坐标，x1,y1结束的坐标，color线条的颜色
if (y0 == y1){ 　　　if (x0>x1) { 　　　　var t=x0; 　　　　x0=x1; 　　　　x1=t; 　　　}	当y0=y1时为水平线
linespan=" <span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";height:1;width:"+Math.abs(x1-x0)+"'> </span>";	动态设置“<SPAN>”标记的样式属性
}else if (x0==x1){ 　　　if (y0>y1){ 　　　　var t=y0; 　　　　y0=y1; 　　　　y1=t; 　　　}	当x0=x1时为垂直线
}else{ 　　　var lx=x1-x0; 　　　var ly=y1-y0; var j=Math.sqrt(lx*lx+ly*ly);	定义两个变量lx, ly 通过直角公式，计算斜线的长度
linespan=new Array(); for (var i=0;i <j;i+=1){ var p=i/j; var px=parseInt(x0+lx*p); var py=parseInt(y0+ly*p);	计算每个一 <SPAN>标记的坐标
linespan[linespan.length]=" <span style='top:"+py+";left:"+px+";height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"'> </span>"; 　　　}	设置数组的相应元素内容
linespan=linespan.join(""); } return linespan; }	通过join方法组合数组的内容