方法代码JS画板（Graphics）类

上班之余抽点时间出来写写博文，希望对新接触的朋友有帮助。明天在这里和大家一起习学一下方法代码

    明天要需在网页上画一个图谱，想到用JS，经过习学，和网上搜索，经过整顿化优失掉上面代码，注意不是用HTML5的canvas，而是用的纯js，

    谢感珠峰训培

    每日一道理
风，渐渐吹起，吹乱了我的发丝，也让我的长裙有些飘动。绿叶仿佛在风中起舞，离开了树，投向了大地，却不知这样会枯萎，我弯下腰，轻轻拾起一片树叶，那非常有序的茎脉，是一种美的点缀。我有些哀叹：绿叶啊，绿叶，你这般美丽地从树上轻轻飘下，随风起舞，却不知已被人称之为落叶！

/* 珠峰训培  2011年12月9日堂课示例
以下画点，画线，画圆的方法，都不是用HTML5的canvas，而是用的纯js
用到了一些数学的三角函数方法 
以下代码是堂课随机写出，没有做更多化优
*/
/*
张世民 2012年12月24日 http://www.cnblogs.com/zsmhhfy/
面向对象封装，加添制绘矩形
进一步化优代码
*/
var Graphics = function(divId, color){
    this.divId = divId;
    this.color = color; //'#000000'或'black'
    this.drawPoint= function(x,y){
        //画点
        var oDiv=document.createElement('div');
        oDiv.style.position='absolute';
        oDiv.style.height='2px';
        oDiv.style.width='2px';
        oDiv.style.backgroundColor=this.color;
        oDiv.style.left=x+'px';
        oDiv.style.top=y+'px';
        //document.body.appendChild(oDiv);
        return oDiv;//注意：返回的值是一个dom点节，但并未追加到文档中    
    };
    this.drawLine = function(x1,y1,x2,y2){
        //画一条线段的方法。(x1,y1),(x2,y2)分别是线段的出发点点终
        var x=x2-x1;//宽
        var y=y2-y1;//高
        var frag=document.createDocumentFragment();
        if(Math.abs(y)>Math.abs(x)){//那个边更长，用那边来做画点的据依（就是上面那个循环），如果不这样，当是一条垂直线或水平线的时候，会画不出来
            if(y>0)//正着画线是这样的
            for(var i=0;i<y;i++){
                var width=x/y*i  //x/y是直角两个边长的比，根据这个比例，求出新坐标的置位
                {
                    
                frag.appendChild(drawPoint(width+x1,i+y1));
                }
            }
            if(y<0){//有时候是倒着画线的
                for(var i=0;i>y;i--){
                var width=x/y*i
                {
                    frag.appendChild(drawPoint(width+x1,i+y1));
                }
            }
            }
        }//end if
        else {
            
            if(x>0)//正着画线是这样的
        for(var i=0;i<x;i++){
            var height=y/x*i
            {
                
            frag.appendChild(drawPoint(i+x1,height+y1));
            }
        }
        if(x<0){//有时候是倒着画线的
            for(var i=0;i>x;i--){
            var height=y/x*i
            {
                frag.appendChild(this.drawPoint(i+x1,height+y1));
            }
        }
        }//end if
            
        }
        document.getElementById(this.divId).appendChild(frag);
    };
    this.drawCircle = function(r, x, y){
        //画个圆。x,原点横坐标；y,原点纵坐标；r,半径
        var frag=document.createDocumentFragment();
        for(var degree=0;degree<360;degree+=2){
            var x1=r*Math.sin(degree*Math.PI/180);
            var y1=r*Math.cos(degree*Math.PI/180);
            frag.appendChild(drawPoint(x+x1,y+y1));
        }
        document.body.appendChild(frag);
    };
    this.dragCircle = function(x1,y1,x2,y2){
        //拖出一个圆来
        var r=Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));//求出半径的长 直角三角形中 斜边的平方=两个直边的平方之和
        
        var frag=document.createDocumentFragment();
        for(var degree=0;degree<360;degree+=2){//每隔2度画一个点
            var x2=r*Math.sin(degree*Math.PI/180);
            var y2=r*Math.cos(degree*Math.PI/180);
            frag.appendChild(drawPoint(x1+x2,y1+y2));
        }
        document.getElementById(this.divId).appendChild(frag);        
    };
    this.drawRect = function(startX, startY, lengthX, lengthY, newId, text){
        //(startX, startY)出发点坐标，lengthX,长 lengthY,宽 newId,新创建的div的Id  text,div内容
        var myDiv=document.createElement('div');
        if(newId){
            myDiv.id=newId;
        }
        myDiv.style.width= lengthX + 'px';
        myDiv.style.height= lengthY + 'px';
        myDiv.style.backgroundColor = this.color;
        myDiv.style.left=startX + 'px';
        myDiv.style.top=startY + 'px';
        myDiv.style.textAlign= 'center';
        if(text){
            myDiv.innerHTML = text;
        }
        document.getElementById(this.divId).appendChild(myDiv);        
    };    
}; 
    
window.onload=function(){
    var g = new Graphics('div1', 'red');
    g.drawLine(500,30,0,30);
    g.color = '#CDC9C9';
    g.drawRect(10,10,200,200, '', '测试');
}

 

文章结束给大家分享下程序员的一些笑话语录： 程序员的愿望
　　有一天一个程序员见到了上帝.上帝: 小伙子,我可以满足你一个愿望.程序员: 我希望中国国家队能再次打进世界杯.
　　上帝: 这个啊!这个不好办啊,你还说下一个吧!
　　程序员: 那好!我的下一个愿望是每天都能休息6个小时以上.
　　上帝: 还是让中国国家打进世界杯.