富贵资源网 Design By www.hznty.com

JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番。JS画图为系列文章,本是讲点、线和面

先看样例:http://www.zhaojz.com.cn/demo/draw5.html

一、点

  这里的点我们使用span标签表示

复制代码 代码如下:
//描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象
function drawPoint(opts){
    document.write("<span id='"+opts.point[0]+""+opts.point[1]+"' style='display: inline-block; width: "+opts.pw+"px; height: "+opts.ph+"px; background-color: "+opts.color+"; position: absolute "+opts.point[0]+"px; top: "+opts.point[1]+"px;'>"+(opts.point[2]"<div style='position: relative;'><span style='position: absolute; left: 5px; bottom: 1px; text-align: left; width: 100px;'>"+opts.point[2]+"</span></div>"):"")+"</span>");
}

 几个参数:

  opts.pw: 点的宽度

  opts.ph: 点的高度, 一般与opts.pw相等

  opts.color: 点的颜色

  opts.point: 表示点的位置,point[0]: 水平位置, point[1]: 垂直位置point[2]为点的标签

注意:position属性,必须为absolute;

二、直线

  直线是由点组成的嘛,因此我们要在两点之间描出n多个点。视觉上,它就是一条直线。

复制代码 代码如下:
//画线
//pstart 起点
//pend 终点
//opts 参数
function drawLine(pstart, pend, opts){
    var ph = 1;
    var pw = 1;
    var color = "DarkRed";
    if(opts){
        color = opts.color "codetitle">复制代码 代码如下:
//折线形
//ps 点的一维数组
function drawPolyline(ps){
    if(ps){
        //画线
        for(var i = 0; i<ps.length-1; i++){
            drawLine(ps[i], ps[i+1]);
        }
        //描拐点
        for(var i = 0; i<ps.length; i++){
            drawPoint({
                pw: 3,
                ph: 3,
                color: 'RED',
                point: ps[i]
            });
        }
       
    }
}

   多边形:

复制代码 代码如下:
//多边形
//ps 点的一维数组
function drawPolygon(ps){
    if(ps){
        //画线
        for(var i = 0; i<ps.length-1; i++){
            drawLine(ps[i], ps[i+1]);
        }
        //使闭合
        if(ps.length > 2){
            drawLine(ps[ps.length-1], ps[0])
        }
        //描拐点
        for(var i = 0; i<ps.length; i++){
            drawPoint({
                pw: 3,
                ph: 3,
                color: 'RED',
                point: ps[i]
            });
        }
    }
}

 
  矩形:

复制代码 代码如下:
//画矩形
//leftTop 左上角的点的位置
//width 宽
//high 高
function drawRectangle(leftTop, width, high){
    drawPolygon([
        leftTop,
        [leftTop[0], leftTop[1]+high],
        [leftTop[0]+width, leftTop[1]+high],
        [leftTop[0]+width, leftTop[1]]
    ]);
    //填充
    //document.write("<span style='height: "+(high-1)+"px; width: "+(width-1)+"px; background-color: "+"Green"+"; position: absolute; left:"+(leftTop[0]+1)+"px; top: "+(leftTop[1]+1)+"'></span>");
}

原来JS也可以做这么炫酷的事情,真是要好好研究下了

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com