01.md

绘制路径

基本知识点

canvas的二维绘制基础是

• 创建二维上下文 canvas.getContext('2d')
• 创建的上下文是一个x轴向右，y轴向下的坐标系，坐标原点(0, 0)在左上角

绘制线段基本API

基于创建的 canvas.getContext('2d') 二维画布上下文 context

context.beginPath() 上下文开始新的绘制

context.moveTo(x, y) 绘制起点移动到坐标(x, y)的位置上

context.lineTo(x, y) 从起点坐标绘制线段到坐标(x, y)的位置上

context.closePath() 以绘制起点 - 终点，用线段闭合

context.lineWidth = {number} 设置当前绘制路径的画笔宽度

context.strokeStyle = {color|rbg} 设置当前绘制路径的颜色

context.stroke() 在画布上“画出”绘制的路径，路径真正显示出来的操作

具体实践

demo 源码地址 https://github.com/chenshenhai/canvas-note/tree/master/demo/basic/drawing-line

利用css绘制网格线，标注尺寸，一个网格是长度为5px的正方形，方便看到绘制后的尺寸效果

canvas {
  background-image:
    linear-gradient(#aaaaaa40 1px, transparent 0),
    linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
    linear-gradient(#aaa 1px, transparent 0),
    linear-gradient(90deg, #aaa 1px, transparent 0);
  background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
  width: 401px;
  height: 401px;
  margin: 10px;
}

生成的网格标尺效果 如下

绘制线段

<canvas id="canvas-1"></canvas>

(function() {
  // 绘制线段 canvas-1
  const canvas = document.getElementById('canvas-1');
  canvas.width = 400;
  canvas.height = 400;

  const context = canvas.getContext('2d');
  context.moveTo(100, 100);
  context.lineTo(300, 100);
  context.lineWidth = 10;
  context.strokeStyle = '#000';
  context.stroke();
})();

绘制折线

<canvas id="canvas-2"></canvas>

(function() {
  // 绘制折线 canvas-2
  const canvas = document.getElementById('canvas-2');
  canvas.width = 400;
  canvas.height = 400;

  const context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(100, 100);
  context.lineTo(300, 100);
  context.lineTo(100, 200);
  context.lineWidth = 10;
  context.strokeStyle = '#000';
  context.stroke();
})();

绘制两条独立线段

<canvas id="canvas-3"></canvas>

(function() {
  // 绘制两条独立线段 canvas-3
  const canvas = document.getElementById('canvas-3');
  canvas.width = 400;
  canvas.height = 400;

  const context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(100, 100);
  context.lineTo(300, 100);
  context.lineWidth = 10;
  context.strokeStyle = '#000';
  context.stroke();

  context.beginPath();
  context.moveTo(300, 100);
  context.lineTo(100, 200);
  context.lineWidth = 10;
  context.strokeStyle = '#ccc';
  context.stroke();
})();

绘制闭合折线

<canvas id="canvas-4"></canvas>

(function() {
  // 绘制闭合折线 canvas-4
  const canvas = document.getElementById('canvas-4');
  canvas.width = 400;
  canvas.height = 400;

  const context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(100, 100);
  context.lineTo(300, 100);
  context.lineTo(100, 200);
  context.lineWidth = 10;
  context.strokeStyle = '#000';
  // 折线自闭合
  context.closePath();
  context.stroke();
})();

绘制线段样式

<canvas id="canvas-5"></canvas>

(function() {
  // 绘制线段样式 canvas-05
  const canvas = document.getElementById('canvas-5');
  canvas.width = 400;
  canvas.height = 400;

  const context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(100, 100);
  context.lineTo(300, 100);
  context.lineCap = 'miter';
  context.lineWidth = 40;
  context.strokeStyle = '#000';
  context.stroke();

  context.beginPath();
  context.moveTo(100, 200);
  context.lineTo(300, 200);
  context.lineCap = 'round';
  context.lineWidth = 40;
  context.strokeStyle = '#000';
  context.stroke();

  context.beginPath();
  context.moveTo(100, 300);
  context.lineTo(300, 300);
  context.lineCap = 'square';
  context.lineWidth = 40;
  context.strokeStyle = '#000';
  context.stroke();

})();

绘制折线样式

<canvas id="canvas-6"></canvas>

(function() {
  // 绘制折线样式 canvas-6
  const canvas = document.getElementById('canvas-6');
  canvas.width = 400;
  canvas.height = 400;

  const context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(20, 40);
  context.lineTo(300, 40);
  context.lineTo(300, 100);
  context.lineJoin = 'miter';
  context.lineWidth = 40;
  context.strokeStyle = '#000';
  context.stroke();

  context.beginPath();
  context.moveTo(20, 160);
  context.lineTo(300, 160);
  context.lineTo(300, 220);
  context.lineJoin = 'bevel';
  context.lineWidth = 40;
  context.strokeStyle = '#000';
  context.stroke();

  context.beginPath();
  context.moveTo(20, 280);
  context.lineTo(300, 280);
  context.lineTo(300, 340);
  context.lineJoin = 'round';
  context.lineWidth = 40;
  context.strokeStyle = '#000';
  context.stroke();

})();