使用JS画图之点、线、面


Posted in Javascript onJanuary 12, 2015

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 ? opts.color: color;

    }

    var slope; //斜率

    var noSlope = false; //是否有斜率

    var hdist = pend[0] - pstart[0];

    var vdist = pend[1] - pstart[1];

    if(hdist != 0){

        slope =  Math.abs(vdist/hdist);  //计算斜率

    }else{

        noSlope = true; //当hdist=0时,直线没有斜率

    }

    var gapp = pw > ph ? ph : pw; //默认相邻点(左上角的像素点)间的距离

    

    var diagonal = Math.sqrt(Math.pow(hdist,2) + Math.pow(vdist,2)); //斜边长度

    var pn = parseInt(diagonal/gapp); //计算两点之间的点的数量

    if(pn < 3){pn=pn*3+1}; //如果点的数量小于3,则加大点数;为什么+1呢,是保证pn=0时至少有一个点

    var vgap = Math.abs(vdist)/pn; //相邻两点间的垂直距离

    var hgap = Math.abs(hdist)/pn; //相邻两点间的水平距离

    for(var i = 0; i< pn ; i++){

        //描点

        //hgap 相邻两点间的水平距离

        //vgap 相邻两点间的垂直距离

        //hgap*i*(pend[0]<pstart[0]?-1:1)*(noSlope?0:1) 相对于起点的水平偏移

        //vgap*i*(pend[1]<pstart[1]?-1:1) 相对于起点的垂直偏移

        //(pend[0]<pstart[0]?-1:1) 水平偏移方向

        //(pend[1]<pstart[1]?-1:1) 垂直偏移方向

        //(noSlope?0:1) 直线没有斜率时,水平偏移为0

        drawPoint({

            pw: pw,

            ph: ph,

            color: color,

            point: [(hgap*i*(pend[0]<pstart[0]?-1:1)*(noSlope?0:1)+pstart[0]),(vgap*i*(pend[1]<pstart[1]?-1:1)+pstart[1])]

        });

    }

}

在线的基础上可以画出折线和面:

折线:

//折线形

//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也可以做这么炫酷的事情,真是要好好研究下了

Javascript 相关文章推荐
dojo随手记 gird组件引用
Feb 24 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
javascript填充默认头像方法
Feb 22 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 #Javascript
jQuery实现友好的轮播图片特效
Jan 12 #Javascript
js函数内变量的作用域分析
Jan 12 #Javascript
Jquery api 速查表分享
Jan 12 #Javascript
js常用系统函数用法实例分析
Jan 12 #Javascript
javascript使用appendChild追加节点实例
Jan 12 #Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 #Javascript
You might like
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python实现图片素描效果
2020/09/26 Python
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
C/C++程序员常见面试题二
2015/11/19 面试题
理工科学生的自我评价
2013/12/15 职场文书
食品安全检查制度
2014/02/03 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
《长征》教学反思
2014/04/27 职场文书
大学新生入学教育方案
2014/05/16 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
初中地理教学反思
2016/02/19 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
详解Vue router路由
2021/11/20 Vue.js
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫