canvas 画步骤图

相关属性或方法

• arc(x, y, r, sAngle, eAngle, counterclockwise)

arc()方法创建弧/曲线（用于创建圆或部分圆）
提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

• strokeStyle（color, gradient, pattern）
  设置或返回用于笔触的颜色、渐变或模式

ctx.strokeStyle = '#0000ff';

• fillStyle（color, gradient, pattern）
  设置或返回用于填充绘画的颜色、渐变或模式
  
• fillText(text,x,y,maxWidth)
fillText()方法在画布上绘制填色的文本。文本的默认颜色是黑色。
  
• beginPath() 开始一条路径，或重置当前的路径
• moveTo(x, y)
moveTo() 方法把路径移动到画布中的指定点，不创建线条。
  
• lineTo(x,y)
  lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。
  
• stroke()
  stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

实现

<canvas @mousemove="handleMove" ref="nodeMap" id="nodeMap" width="600" height="480"></canvas>

let arr = [
   {
        time: '2022-02-03 12:00:00',
        subtitle: '副标题',
        name: '夏利飞'
    },
    {
        time: '2022-02-03 12:00:00',
        subtitle: '副标题',
        name: '夏利飞'
    },
    {
        time: '2022-02-03 12:00:00',
        subtitle: '副标题',
        name: '夏利飞'
    },
    {
        time: '2022-02-03 12:00:00',
        subtitle: '副标题',
        name: '夏利飞'
    },
    {
        time: '2022-02-03 12:00:00',
        subtitle: '副标题',
        name: '夏利飞'
    },
    {
        time: '2022-02-03 12:00:00',
        subtitle: '副标题',
        name: '夏利飞'
    },
    {
        time: '2022-02-03 12:00:00',
        subtitle: '副标题',
        name: '夏利飞'
    },
]
let ctx = this.$refs.nodeMap.getContext("2d");
let x = 21, y = 21; // 圆坐标轴
let line = 140;
arr.forEach((item, index) => {
    ctx.strokeStyle = '#6e6e6e';    // 线颜色
    ctx.fillStyle = '#6e6e6e';  // 文字颜色
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, 2*Math.PI);  // x坐标, y坐标, 半径, 起始角, 结束角
    ctx.font = '20px Arial'
    ctx.fillText(index + 1, x - 5, y + 6);  // 文本, x, y
    ctx.font = '20px Arial';
    ctx.fillText(item.subtitle, x - 20, 60)
    ctx.font = '14px Arial';
    ctx.fillText(item.name, x - 20, 80)
    ctx.fillText(item.time, x - 20, 100)
    ctx.moveTo(x + 20, y);
    ctx.lineTo(x+line, y);
    x = (x + 20 + line);
    ctx.stroke();   // 绘制路线