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 相关文章推荐
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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中随机显示图片的函数代码
2011/06/23 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
php实现等比例压缩图片
2018/07/26 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
js切换div css注意的细节
2012/12/10 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
js命名空间写法示例
2015/12/18 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
PHP7新特性简述
2017/06/11 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中模块string.py详解
2017/03/12 Python
python字符串常用方法
2018/06/14 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
Python中print和return的作用及区别解析
2019/05/05 Python
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
英语专业推荐信
2013/11/16 职场文书
公共场所标语
2014/06/30 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
经营场所证明范本
2015/06/19 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python