canvas 线绘制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas 线绘制</title>
    <style>
      #canvas {
        background-color: #f9f9f9;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas">浏览器不支持 canvas </canvas>
  </body>
  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.height = 500;
    canvas.width = 500;

    // 单线：宽 5、圆角
    ctx.lineWidth = 5; // 线宽：默认 1px
    ctx.strokeStyle = "red"; // 线宽：默认 1px
    ctx.lineCap = "round"; // 折线的拐点类型 butt-默认 round-圆角 square-超出方角
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.lineTo(20, 300);
    ctx.stroke(); // 线条描边，显示线

    // 单线：虚线
    ctx.lineWidth = 1; // 重置线宽
    ctx.strokeStyle = "#000"; // 重置线条颜色
    ctx.setLineDash([5, 10]); // 虚线：片段长度-5 间隔-10
    ctx.lineDashOffset = 1; // 虚线偏移量
    ctx.beginPath();
    ctx.moveTo(40, 20);
    ctx.lineTo(40, 300);
    ctx.stroke();

    // 折线：折线、圆角拐点、闭合
    ctx.setLineDash([]); // 重置虚线
    ctx.lineWidth = 5;
    ctx.lineJoin = "round"; // 折线的拐点类型：miter-默认 round-圆角 bevel-平角
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(100, 200);
    ctx.lineTo(200, 200);
    ctx.lineTo(200, 100);
    ctx.closePath(); // 闭合：最终点和初始点将会连线闭合
    ctx.stroke();

    // 圆弧、圆
    // ctx.arc(圆心-x, 圆心-y, 半径-radius, 开始角度-startAngle, 结束角度-endAngle , anticlockwise 逆时针);
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.arc(300, 75, 50, 0, Math.PI / 2, true);
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.arc(300, 275, 50, 0, Math.PI * 2, true);
    ctx.stroke();

    // 贝塞尔曲线：ctx.bezierCurveTo(起始横, 起始纵, 控制横, 控制纵, 结束横, 结束纵);
    // 贝塞尔曲线生成器：https://cubic-bezier.tupulin.com/#cubic-bezier(0.11,0.68,0.83,0.45)
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.bezierCurveTo(100, 100, 200, 40, 250, 100);
    ctx.stroke();
  </script>
</html>
canvas 线 绘制

推荐阅读更多精彩内容

canvas 线绘制
