使用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 相关文章推荐
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
简单的jQuery入门指引
Jul 28 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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/05/27 PHP
php的字符串用法小结
2010/06/08 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
JavaScript效率调优经验
2009/06/04 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
javascript arguments使用示例
2014/12/16 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
微信小程序的部署方法步骤
2018/09/04 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
python贪吃蛇游戏代码
2020/04/18 Python
简单了解python变量的作用域
2019/07/30 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
python 实现任务管理清单案例
2020/04/25 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
士力架广告词
2014/03/20 职场文书
安全施工责任书
2014/08/25 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
天那边观后感
2015/06/09 职场文书