讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

使用JS画图之点、线、面_javascript技巧

php中文网
发布： 2016-05-16 16:20:55
原创
1895人浏览过

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

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

一、点

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

复制代码 代码如下:

//描点，参数有点的大小，颜色，点的坐标和标签; 很明显opts参数是一个对象
function drawPoint(opts){
    document.write(""+(opts.point[2]?("
"+opts.point[2]+"
"):"")+"");
}

 几个参数：

立即学习“Java免费学习笔记（深入）”；

　　opts.pw: 点的宽度

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

　　opts.color: 点的颜色

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

注意：position属性，必须为absolute;

零一万物开放平台
零一万物开放平台

零一万物大模型开放平台

零一万物开放平台 48
查看详情 零一万物开放平台

二、直线

　　直线是由点组成的嘛，因此我们要在两点之间描出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     var vgap = Math.abs(vdist)/pn; //相邻两点间的垂直距离
    var hgap = Math.abs(hdist)/pn; //相邻两点间的水平距离
    for(var i = 0; i         //描点
        //hgap 相邻两点间的水平距离
        //vgap 相邻两点间的垂直距离
        //hgap*i*(pend[0]         //vgap*i*(pend[1]         //(pend[0]         //(pend[1]         //(noSlope?0:1) 直线没有斜率时，水平偏移为0
        drawPoint({
            pw: pw,
            ph: ph,
            color: color,
            point: [(hgap*i*(pend[0]         });
    }
}

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

　　折线：

复制代码 代码如下:

//折线形
//ps 点的一维数组
function drawPolyline(ps){
    if(ps){
        //画线
        for(var i = 0; i             drawLine(ps[i], ps[i+1]);
        }
        //描拐点
        for(var i = 0; i             drawPoint({
                pw: 3,
                ph: 3,
                color: 'RED',
                point: ps[i]
            });
        }
       
    }
}

 　　多边形：

复制代码 代码如下:

//多边形
//ps 点的一维数组
function drawPolygon(ps){
    if(ps){
        //画线
        for(var i = 0; i             drawLine(ps[i], ps[i+1]);
        }
        //使闭合
        if(ps.length > 2){
            drawLine(ps[ps.length-1], ps[0])
        }
        //描拐点
        for(var i = 0; 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("");
}

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

相关标签：
js

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：jQuery制作拼图小游戏_jquery 下一篇：js实现从数组里随机获取元素_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
javascript如何实现浏览器指纹识别_有哪些常用技术？ 浏览器指纹识别通过组合Canvas、WebGL、navigator属性、时区和屏幕信息等5–7个稳定字段哈希生成，非隐私模式下识别率超90%，但需遵守GDPR/CCPA合规要求。
2025-12-23 17:12:09
177
javascript的柯里化是什么_它如何实现函数转换？ 柯里化是将多参数函数转换为单参数函数链的过程，通过闭包保存已传参数，待参数数量满足时执行原函数；其核心是延迟求值与部分参数固定，区别于可多参数传入的偏函数。
2025-12-23 17:10:02
234
javascript如何实现截图功能_怎样将网页保存为图片？ JavaScript无法直接调用系统截图API，但可通过html2canvas或dom-to-image库将DOM渲染为图片，或借助Puppeteer等服务端工具实现高质量截图。
2025-12-23 17:07:02
693
javascript的Babel是什么_如何转换新版本代码？ Babel是将新标准JavaScript代码（如ES2015+、TypeScript、JSX）转换为向后兼容版本（如ES5）的编译器，通过解析→转换→生成三步基于AST实现精准降级，解决浏览器环境对新语法支持滞后的问题。
2025-12-23 16:49:17
434
javascript JSON是什么_如何解析和序列化JSON数据 JSON是字符串而非对象，需用JSON.parse()解析、JSON.stringify()生成；键名必须双引号，不支持单引号、undefined、函数等；格式错误会直接报错。
2025-12-23 16:48:43
452
javascript怎样操作蓝牙设备？_javascript的Web Bluetooth API如何使用？ WebBluetoothAPI允许HTTPS或localhost环境下通过用户交互调用requestDevice()、connect()、getPrimaryService()、readValue()等异步方法与BLE设备通信，Chrome/Edge/Opera支持，Safari/Firefox不支持。
2025-12-23 16:46:15
693
javascript如何实现自动化测试_怎样用Selenium控制浏览器 最常用方式是结合SeleniumWebDriver与Node.js生态，或更推荐Playwright；Playwright开箱即用、多浏览器支持、自动等待；Selenium需手动管理驱动；定位优先用data-testid，避免固定等待，测试应独立可重复。
2025-12-23 16:45:18
436
javascript如何实现代码格式化_工具如Prettier如何配置？ Prettier是主流JavaScript代码格式化工具，开箱即用且支持精细配置；推荐项目本地安装，通过配置文件（如.prettierrc.js）或命令行统一风格，并与ESLint协同实现质量与格式双修复。
2025-12-23 16:37:02
542
javascript如何操作蓝牙_Web Bluetooth API有哪些实际应用场景？ JavaScript可通过WebBluetoothAPI在支持浏览器中直接连接BLE设备，适用于工业传感、医疗监测、教育开发及门禁验证等场景，需HTTPS、用户触发、设备广播指定服务且仅限Chrome/Edge支持。
2025-12-23 16:23:02
163
javascript的模块化是什么_如何使用import和export？ JavaScript模块化通过export和import实现代码拆分与依赖管理，支持命名导出、默认导出及混合导入，需注意顶层导入、路径规范、环境配置（如type="module"）及常见误区。
2025-12-23 16:21:30
440
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部