在画布上绘制两条路径；绿色和紫色

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。

</canvas>

<script>

  var c = document.getElementById("myCanvas");

  var ctx = c.getContext("2d");

  ctx.beginPath();

  ctx.lineWidth = "5";

  ctx.strokeStyle = "green"; // 绿色路径

  ctx.moveTo(0, 75);

  ctx.lineTo(250, 75);

  ctx.stroke(); // 画

  ctx.beginPath();

  ctx.strokeStyle = "purple"; // 紫色的路径

  ctx.moveTo(50, 0);

  ctx.lineTo(150, 130);

  ctx.stroke(); // 画

</script>