JavaScript使用canvas绘制坐标和线


Posted in Javascript onApril 28, 2021

本文实例为大家分享了JavaScript使用canvas绘制坐标和线的具体代码,供大家参考,具体内容如下

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在指定位置画多个点</title>
    <style>
        canvas{
            border: 1px dashed gray;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
</body>
</html>

js代码:

<script>
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
 
    // 坐标轴距离画布上右下左的边距
    var padding = {
        top:20,
        right:20,
        bottom:20,
        left:20
    }
    // 坐标轴中箭头的宽和高
    var arrow = {
        width:12,
        height:20
    }
    // 求坐标轴上顶点的坐标
    var vertexTop = {
        x:padding.left,
        y:padding.top
    }
    // 求坐标轴原点的坐标
    var origin = {
        x:padding.left,
        y:cvs.height - padding.bottom
    }
    // 求坐标轴右顶点的坐标
    var vertexRight = {
        x:cvs.width - padding.left,
        y:cvs.height - padding.bottom
    }
 
    //设置线宽
    ctx.lineWidth = 2;
    //画坐标轴的两条线
    ctx.beginPath();
    ctx.moveTo(vertexTop.x,vertexTop.y);
    ctx.lineTo(origin.x,origin.y);
    ctx.lineTo(vertexRight.x,vertexRight.y);
    ctx.stroke();
 
    //如何画箭头
    //画顶上箭头
    // ^
    // |
    // |
    ctx.beginPath();
    ctx.moveTo(vertexTop.x,vertexTop.y);
    ctx.lineTo(vertexTop.x - arrow.width/2,vertexTop.y + arrow.height);
    ctx.lineTo(vertexTop.x,vertexTop.y + arrow.height/2);
    ctx.lineTo(vertexTop.x + arrow.width/2,vertexTop.y + arrow.height);
    ctx.fill();
 
    //画右边的箭头
    // --->
    ctx.beginPath();
    ctx.moveTo(vertexRight.x,vertexRight.y);
    ctx.lineTo(vertexRight.x - arrow.height,vertexRight.y - arrow.width);
    ctx.lineTo(vertexRight.x - arrow.height/2,vertexRight.y);
    ctx.lineTo(vertexRight.x - arrow.height,vertexRight.y + arrow.width);
    ctx.fill();
 
    /*
     * 在坐标轴中指定位置画点,坐标算法:
     * 点的x轴:原点x坐标 + 点到原点的水平距离
     * 点的y轴:原点y坐标 - 点到原点的垂直距离
     */
    //定义点的坐标
    var points = [[10,10],[50,50],[90,90],[130,130],[170,170],[200,200]];
    //在坐标中画点 使用循环遍历数组中的坐标
    //设置颜色
    ctx.fillStyle = "green";
    points.forEach(function(arr){
        ctx.fillRect(origin.x + arr[0],origin.y - arr[1],5,5);
    });
    //根据点连线
    //防止重绘
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "yellow";
    points.forEach(function (arr) {
        ctx.lineTo(origin.x + arr[0] + 1.8,origin.y - arr[1] + 1.8);
    });
    //描边
    ctx.stroke();
</script>

效果如下:

JavaScript使用canvas绘制坐标和线

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
JS Object构造函数之Object.freeze
Apr 28 #Javascript
关于vue中如何监听数组变化
vue实现简单数据双向绑定
Apr 28 #Vue.js
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 #Javascript
vue引入Excel表格插件的方法
Apr 28 #Vue.js
react如何快速设置文件路径别名
原生JS封装vue Tab切换效果
You might like
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python实现的双色球生成功能示例
2017/12/18 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
python实现顺时针打印矩阵
2019/03/02 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
Exception类的常用方法
2012/06/16 面试题
网页设计个人找工作求职信
2013/11/28 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
健康状况证明模板
2014/10/23 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python