[JavaScript知识库] canvas画直线

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> canvas画直线 -> 正文阅读

[JavaScript知识库]canvas画直线

随着数据可视化的蓬勃发展，市场上对canavas相关的需求量越来越大，今天整理了一些canavas的一些基础操作方法，希望能帮助到大家。
万丈高楼平地起，从零开始，先使用 canavas 画一条直线

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #can {
      border: 1px solid #999;
    }
  </style>
  <body>
    <canvas width="500" height="500" id="can"></canvas>
  </body>
  <script>
    //   获取画布的Dom节点
    const canvas = document.getElementById("can");
    //   获取画布上下文对象
    let ctx = canvas.getContext("2d");
    // 设置直线的起点坐标
    ctx.moveTo(10, 10);
    // 设置直线的终点坐标
    ctx.lineTo(310, 10);
    // 设置直线的颜色
    ctx.strokeStyle = "skyblue";
    // 设置直线的粗细
    ctx.lineWidth = "5";
    // 设置直线两端的样式（线帽） butt | round | square
    ctx.lineCap = "round";
    // 绘制线条（通过描边的方式绘制图形）
    ctx.stroke();
  </script>
</html>