canvas 绘制坐标轴

 

 

结果：

 

 

代码：

 

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

 

posted @ 2017-05-26 00:34  快乐的咸鱼  阅读(3150)  评论(0)  编辑  收藏  举报