canvas 繪制坐標軸

本文轉載自查看原文 2017-05-26 00:34 2083 小小demo

結果：

代碼：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
    canvas {
      background: #ddd;
    }
  </style>
</head>
<body>
  <h3>繪制路徑——直線</h3>
  <canvas id="c13" width="500" height="400"></canvas>
  <script>
    var ctx = c13.getContext('2d');

    //繪制X軸
    ctx.beginPath();
    ctx.moveTo(50, 350);
    ctx.lineTo(450, 350);
    ctx.lineTo(450-20, 350-20);
    ctx.moveTo(450, 350);
    ctx.lineTo(450-20, 350+20);

    //ctx.lineJoin = 'miter'; //線的連接處采用尖角
    //ctx.lineJoin = 'bevel'; //線的連接處采用方角
    ctx.lineJoin = 'round'; //線的連接處采用圓角
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#0a0';
    ctx.stroke();

    //繪制Y軸
    ctx.beginPath();  //必須開始新路徑
    ctx.moveTo(50, 350);
    ctx.lineTo(50, 50);
    ctx.lineTo(50-20, 50+20);
    ctx.moveTo(50, 50);
    ctx.lineTo(50+20, 50+20);

    ctx.strokeStyle = '#00f';
    ctx.stroke();

  </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 canvas繪制坐標軸 canvas(七)繪制網格和坐標軸使用 matplotlib 繪制帶日期的坐標軸 2018.09.26canvas畫布在坐標軸上的位置 VTK 對象繪制 3D坐標軸(vtkCubeAxesActor) [3D]繪制XYZ小坐標軸 osg 在場景中繪制坐標軸(xyz) Matplotlib 坐標軸 TeeChart的坐標軸 D3.js坐標軸的繪制方法、添加坐標軸的刻度和各比例尺的坐標軸(V3版本)