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小数计算出现近似值的解决办法
Feb 06 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
初识javascript 文档碎片
Jul 13 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 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
PHP5中MVC结构学习
2006/10/09 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
初中美术教学反思
2014/01/29 职场文书
请假条格式范文
2014/04/10 职场文书
促销活动总结
2014/04/28 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
技术员个人工作总结
2015/03/03 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python