canvas 绘制坐标轴

最新推荐文章于 2024-03-05 17:39:42 发布

weixin_30241919

最新推荐文章于 2024-03-05 17:39:42 发布

阅读量162

点赞数

原文链接：http://www.cnblogs.com/web-fusheng/p/6906630.html

版权

结果：

代码：

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

转载于:https://www.cnblogs.com/web-fusheng/p/6906630.html

weixin_30241919

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 绘制坐标轴

结果：代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: ...
复制链接

扫一扫