zoukankan      html  css  js  c++  java
  • canvas绘制坐标轴

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    body {
    text-align: center;
    }

    canvas {
    background: #ddd;
    }
    </style>
    </head>
    <body>
    <canvas width="600" height="400" style="border-color: #eee"></canvas>
    </body>
    <script>
    /*
    默认的线条宽度1px
    默认的颜色是黑色
    产生的原因是
    */
    //获取元素
    var myCanvas = document.querySelector('canvas');
    //获取上下文
    var ctx = myCanvas.getContext('2d');
    var grid = 10;
    var canvasHeight = ctx.canvas.height;//计算canvas画布的高度
    var canvasWidth = ctx.canvas.width;//获取画布的宽度
    var xLineNumber = Math.floor(canvasWidth / grid);//计算需要几条横线
    var yLineNumber = Math.floor(canvasHeight / grid);//计算需要几条竖线
    ctx.strokeStyle = "#eee";
    for (var i = 0; i < xLineNumber; i++) {//循环来画线
    ctx.beginPath();
    ctx.moveTo(i * grid, 0);
    ctx.lineTo(i * grid, canvasHeight);
    ctx.stroke();
    }
    for (var i = 0; i < yLineNumber; i++) {
    ctx.beginPath();
    ctx.moveTo(0, i * grid);
    ctx.lineTo(canvasWidth, i * grid);
    ctx.stroke();
    }
    //绘制坐标轴

    //1.绘制Y轴
    var spance = 20;
    var arrowSize = 10;
    ctx.beginPath();
    ctx.moveTo(spance, spance);
    ctx.lineTo(spance, canvasHeight - spance);
    ctx.strokeStyle = "black";
    ctx.stroke();
    //2.绘制X轴
    ctx.beginPath();
    ctx.moveTo(spance, canvasHeight - spance);
    ctx.lineTo(canvasWidth - spance, canvasHeight - spance);
    ctx.stroke();
    //3.绘制X轴的箭头
    ctx.moveTo(canvasWidth - spance, canvasHeight - spance - 5);
    ctx.lineTo(canvasWidth - spance, canvasHeight - spance + 5);
    ctx.lineTo(canvasWidth - spance + 10, canvasHeight - spance);
    ctx.closePath();
    ctx.fill();
    //绘制Y轴箭头
    ctx.moveTo(spance - 5, spance);
    ctx.lineTo(spance + 5, spance);
    ctx.lineTo(spance, spance - 10);
    ctx.closePath();
    ctx.fill();

    ctx.moveTo(20,350);//移端点
    ctx.lineTo(200,20);
    // context.setLineDash([10,15]);//(1参)10虚线长度;(2)15这根线和下个线的距离;
    ctx.stroke();
    </script>
    </html>
    下面绘制一条起点是(50,50),终点是(150,150)的直线线条
    context.moveTo(50, 50);
    context.lineTo(150, 150);
    context.stroke();
  • 相关阅读:
    一行命令搞定AD数据库备份
    PowerShell实战4:批量修改AD账户EMail属性
    PowerShell实战1:Ping_Test
    分享/etc/sysctl.conf和/boot/loader.conf优化
    PowerShell实战5: 批量增加AD组成员
    bsd压力测试工具
    kernel : arp .....的訊息
    将域控制器移到新的 Active Directory 站
    pf限速限链接数
    FreeBSD笔记
  • 原文地址:https://www.cnblogs.com/liulinjie/p/12752926.html
Copyright © 2011-2022 走看看