您正在使用IPV4(3.236.214.224)访问本站 您本次共访问本站 1 次
用户名: 用QQ登录本站
密 码:
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!      
广告位招租中
2021年 建党节 9
2021年 建军节 40
2022年 元 旦 193
2022年 春 节 224
 
  • 您现在的位置:首页 >> JS >> 内容

    JavaScript使用canvas绘制坐标和线

    内容摘要: !DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'title在指定位置画多个点/titlestylecanvas{border: 1px dashed gray;}/style/headbodycanvas id='cvs' width='500' height='500'/canvas/body /htm......

      <!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>

    <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>

    手机扫描二维码可直达本页
      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2021/6/15 发布时间:12:34:56 点击:40 录入:齐天大圣
  • 上一篇:随滚动条移动的层
  • 下一篇:JavaScript实现长图滚动效果
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.5 Build 21.06.17(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021