脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → canvas绘制坐标和线

JavaScript使用canvas绘制坐标和线

 更新时间：2021年04月28日 15:06:47   作者：evan_qb  
这篇文章主要为大家详细介绍了JavaScript使用canvas绘制坐标和线，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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的字符串方法详解

    Javascript的字符串方法详解

    这篇文章主要介绍了Javascript字符串方法详解的相关资料,在平时工作中经常会用到的，非常不错，需要的朋友可以参考下,希望能够给你带来帮助
    2021-09-09
  • JavaScript 手动实现instanceof的方法

    JavaScript 手动实现instanceof的方法

    instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上，本文重点给大家介绍JavaScript手动实现instanceof的问题，感兴趣的朋友跟随小编一起看看吧
    2021-10-10
  • Javascript设计模式之观察者模式(推荐)

    Javascript设计模式之观察者模式(推荐)

    观察者模式有时也称为发布--订阅模式，在观察者模式中，有一个观察者可以管理所有的目标，等到有状态发生改变的时候发出通知
    2016-03-03
  • 显示今天的日期js代码(阳历和农历)

    显示今天的日期js代码(阳历和农历)

    这篇文章主要介绍了Js中显示日期和农历的代码，很简单，但很实用，有图片，需要的朋友可以参考下
    2014-09-09
  • JavaScript中Object.prototype.toString方法的原理

    JavaScript中Object.prototype.toString方法的原理

    这篇文章主要介绍了JavaScript中Object.prototype.toString方法的原理的相关资料,需要的朋友可以参考下
    2016-02-02
  • js实现九宫格抽奖

    js实现九宫格抽奖

    这篇文章主要为大家详细介绍了js实现九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 使用Fullpage插件快速开发整屏翻页的页面

    使用Fullpage插件快速开发整屏翻页的页面

    这篇文章给大家分析使用Fullpage插件快速开发整屏翻页的页面，适用于各大网站，此功能非常高大上，下面就跟随脚本之家小编看看Fullpage插件是怎么实现此效果的
    2017-09-09
  • javascript中传统事件与现代事件

    javascript中传统事件与现代事件

    本文给大家介绍的是使用传统事件的方法来模拟现代事件，十分的简单实用，有需要的小伙伴可以参考下。
    2015-06-06
  • 原生js实现星星闪烁效果

    原生js实现星星闪烁效果

    这篇文章主要为大家详细介绍了原生js实现星星闪烁效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 利用JavaScript实现静态图片局部流动效果

    利用JavaScript实现静态图片局部流动效果

    如果你有玩过《王者荣耀》、《阴阳师》 等手游，一定注意到过它的启动动画、皮肤立绘卡片等场景，经常采用静态底图加局部液态流动效果的简单动画，本文将利用JavaScript实现这一效果，需要的可以参考一下
    2022-08-08

最新评论