使用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 相关文章推荐
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
深入解析ES6中的promise
Nov 08 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
ant design 日期格式化的实现
Oct 27 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
vant时间控件使用方法详解
2020/12/24 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
pandas去除重复列的实现方法
2019/01/29 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
python监控nginx端口和进程状态
2019/09/06 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
python中提高pip install速度
2020/02/14 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
Java面试题汇总
2015/12/06 面试题
营销与策划个人求职信
2013/09/22 职场文书
党委班子剖析材料
2014/08/21 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
辩护词范文大全
2015/05/21 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL