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 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
JS数组方法some、every和find的使用详情
Oct 05 Javascript
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
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
php短址转换实现方法
2015/02/25 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
如何通过命令行进入python
2020/07/06 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
Django权限控制的使用
2021/01/07 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
赔偿协议书范本
2014/09/12 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
交通事故委托书范本
2014/09/28 职场文书
2014年终个人工作总结
2014/11/07 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
Python 绘制多因子柱状图
2022/05/11 Python