• logo
    • 简体中文
    • 繁体中文
    • English
    • 概览
    • 特性
    • 截图
    • 下载
    • 教学
    • 参考
    • 更新记录
    • 开发计划
    • 乐学软件首页
    概览
    趣味编程小画板是一款使用javaScript脚本及Java2D技术编程绘图的小软件。
    特性
    • 使用javascript编程画图。
    截图
    主界面截图
    下载
    趣味编程小画板基于Java Web start技术,点此安装运行
    教学
    第一课:画线 从点[0,0] 到 点[100,100]
    g.clearRect(0,0,1000,1000);
    g.drawLine(0,0,100,100);
    第二课:画多边形、直角坐标及sin函数图像
    importPackage(javax.swing);
    importPackage(java.awt.geom);
    importPackage(java.awt);

    //clear screen
    g.setBackground(Color.WHITE);
    g.clearRect(0,0,10000,10000);
    g.setColor(Color.RED);

    var polygon=new Polygon();
    //polygon
    polygon.addPoint(100,50);
    polygon.addPoint(150,30);
    polygon.addPoint(200,160);
    polygon.addPoint(120,180);
    g.fill(polygon);

    //coordinate
    var path=new GeneralPath();
    path.moveTo(-10,400);
    for(var x=-10;x<=200;x+=10){
    path.lineTo(20+x,400);
    }
    g.draw(path);
    g.drawString("x",220,400);
    path.reset();
    path.moveTo(20,190);
    for(var y=-10;y<=220;y+=10){
    path.lineTo(20,200+y);
    }
    g.draw(path);
    g.drawString("y",20,190);

    var p=new GeneralPath();
    p.moveTo(20+0.0,400+Math.sin(0.0));
    for(var x=0.0;x<=Math.PI;x+=0.1){
    var y=Math.sin(x);
    g.drawString("x="+x+"|y="+y,300,x*150);
    p.lineTo(x*50+20,y*50+400);
    }
    g.draw(p);
    第三课:子程序
    importPackage(java.awt);
    importPackage(java.awt.geom);
    function drawTriangle(pt1x,pt1y,pt2x,pt2y,pt3x,pt3y){
    var p=new Polygon();
    p.addPoint(pt1x,pt1y);
    p.addPoint(pt2x,pt2y);
    p.addPoint(pt3x,pt3y);
    g.fill(p);
    }
    //draw coordanate
    g.clearRect(0,0,1000,1000);
    //draw
    drawTriangle(100,100,150,100,150,130);

    //o=[200,200]
    g.fillRect(200,200,4,4);

    g.drawLine(100,100,300,300);
    g.drawLine(150,100,250,300);
    g.drawLine(150,130,250,270);
    g.setColor(Color.RED);
    //draw polygon
    drawTriangle(300,300,250,300,250,270);


    第四课:分形图案
    importPackage(java.awt);
    importPackage(java.awt.geom);

    g.clearRect(0,0,1000,1000);
    function getX(ox,r,angle){
        var ret=0;
        var arc=Math.PI*angle/180;
        ret=ox+r*Math.cos(arc);
        return ret;
    }
    function getY(oy,r,angle){
        var ret=0;
        var arc=Math.PI*angle/180;
        ret=oy+r*Math.sin(arc);
        return ret;
    }
    function drawMyShape(ox,oy,r,numAngle,level){
        if(level<1){
            return;
        }
        var color=new Color(Math.random(),Math.random(),Math.random());
        g.setColor(color);
        g.draw(new Ellipse2D.Float(ox-r,oy-r,2*r,2*r));
        var p=new Polygon();
        for(var i=1;i<=numAngle;i++){
            var angle=360*i/numAngle;
            var x=getX(ox,r,angle);
            var y=getY(oy,r,angle);
            p.addPoint(x,y);
            drawMyShape(x,y,r,numAngle,level-1);
        }
        g.setColor(color);
        g.draw(p);    
    }

    var r=100;
    var ox=300;
    var oy=300;
    drawMyShape(150,200,50,3,3);
    drawMyShape(500,200,50,4,3);
    drawMyShape(150,500,50,5,3);
    drawMyShape(500,500,50,6,3);

    第五课:函数图像
    importPackage(java.awt);
    importPackage(java.awt.geom);

    g.clearRect(0,0,2000,2000);

    function getRel(relV,oV,unit){
        return (relV-oV)*unit;
    }
    function getRange(data){
        var min=data[0];
        var max=data[0];
        for(var i=0;i        if(data[i]>max){
                max=data[i];
            }
            if(data[i]            min=data[i];
            }
        }
        return max-min;
    }
    function drawFuncLine(arrayX,func,absox,absoy,width,height,autoScaleAxis,showValue){
        g.drawRect(absox-1,absoy-1,2,2);
        var arrayY=new Array();
        for(var i=0;i        arrayY.push(func(arrayX[i]));
        }
        var temp=getRange(arrayX);
        var unitX=0;
        if(temp!=0){
            unitX=(width-50)/temp;
        }
        temp=getRange(arrayY);
        var unitY=0;
        if(temp!=0){
            unitY=(height-50)/temp;
        }
        if(autoScaleAxis==null||!autoScaleAxis){
            unitX=1;
            unitY=1;
        }
        
        for(var i=0;i        var x=absox+getRel(arrayX[i],arrayX[0],unitX);
            var y=absoy-getRel(arrayY[i],arrayY[0],unitY);
            if(i-1>=0){
                var prevX=absox+getRel(arrayX[i-1],arrayX[0],unitX);
                var prevY=absoy-getRel(arrayY[i-1],arrayY[0],unitY);
                g.drawLine(prevX,prevY,x,y);
            }
            if(showValue){
                g.drawString("x="+arrayX[i]+"|y="+arrayY[i],x,y);
            }
        }
    }
    function buildArray(first,last,step){
        var ret=new Array();
        for(var i=first;i<=last;i+=step){
            ret.push(i);
        }
        return ret;
    }

    function myGetY(x){
        var ret=0;
        //    var ret=x*x;
        //var ret=x*x*x;
        //ret=5;
        if(x==0){
            ret=0;
        }else{
            ret=1000/x;
        }
        //ret=x*x;
        //ret=10*x;
        ret=x*x/2;
        return ret;
    }
    //var arrayX=buildArray(-Math.PI*5,Math.PI*5,0.05);
    //drawFuncLine(arrayX,Math.sin,50,100,500,300,false);

    var arrayX=buildArray(-60,60,5);
    drawFuncLine(arrayX,function(x){return 3*x*x+2*x;},50,300,300,300,true,true);
    drawFuncLine(arrayX,function(x){return -3*x*x+2*x;},50,600,300,300,true,false);
    参考
    • 变量:g ->java.awt.Graphics2D
    • 趣味编程小画板是基于Java1.6及Java scripting技术开发
    • Java2D 参考 http://java.sun.com/javase/6/docs/technotes/guides/2d/index.html
    更新记录
    • 2009-8-5 发布趣味编程小画板 1.0beta.
    开发计划
    • 暂无
  • 版权保留 Tsihai 2009 giant35@gmail.com