canvas画曲线波形图时，要求调数组对象为[{"pts": [{"X": 0, "Y": 8},{"X": 1, "Y": 4}]},{"pts": [{"X": 0, "Y": 9},{"X": 1, "Y": 9}]}·······]的本地json文件，求全部步骤和全部代码

步骤：

1. 创建canvas元素和上下文对象
2. 加载本地json文件，获取数据数组
3. 循环遍历数据数组，获取每个对象中的pts数组
4. 循环遍历pts数组，根据每个点的坐标绘制曲线
5. 设置样式和属性，完成绘制

代码：

HTML部分：

<canvas id="myCanvas"></canvas>

JavaScript部分：

// 获取canvas元素和上下文对象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 加载本地json文件
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    drawWaveform(data);
  }
};
xhr.send();

// 绘制曲线波形图
function drawWaveform(data) {
  // 循环遍历数据数组
  for (var i = 0; i < data.length; i++) {
    var pts = data[i].pts;
    ctx.beginPath();
    // 循环遍历pts数组
    for (var j = 0; j < pts.length; j++) {
      var x = pts[j].X * 50; // x轴放大50倍
      var y = pts[j].Y * 10; // y轴放大10倍
      if (j == 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    }
    // 设置样式和属性
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#000";
    ctx.stroke();
  }
}