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数组，取出每个点的X、Y坐标
5. 将X、Y坐标转换为画布上的坐标
6. 使用canvas的lineTo方法连接各个点，形成波形图
7. 通过stroke方法绘制波形图的线条

代码示例：

HTML部分

<canvas id="waveform" width="800" height="400"></canvas>

JavaScript部分

// 获取canvas元素
var canvas = document.getElementById('waveform');
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) {
    // 设置画布样式
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#f00';

    // 遍历数组对象
    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;
            var y = pts[j].Y;

            // 将X、Y坐标转换为画布上的坐标
            var px = x * 50;
            var py = canvas.height - y * 10;

            // 使用lineTo方法连接各个点
            if (j === 0) {
                ctx.moveTo(px, py);
            } else {
                ctx.lineTo(px, py);
            }
        }

        // 绘制波形图的线条
        ctx.stroke();
    }
}