Canvas 使用百分比（%）而不是像素（px）的线性渐变宽度

我正在使用chart.js制作具有线性渐变的图形：

<script src="js/Chart.min.js"></script>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');

var grd = ctx.createLinearGradient(0, 0, canvas.width, 0);
grd.addColorStop(0.2, 'red');
grd.addColorStop(0.4, 'orange');
grd.addColorStop(0.78, 'limegreen');
grd.addColorStop(0.9, 'black');

var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'horizontalBar',

    // The data for our dataset
    data: {
        labels: ["Confort"],
        datasets: [
        {
            label: ["Confort actuel"],
            borderWidth: 0,
            borderColor: 'rgba(0,0,0,1.0)',
            backgroundColor: 'rgba(0,0,0,0.2)',
            hoverBackgroundColor: 'rgba(0,0,0,0)',
            data: [64],     
        },
        {
            label: ["Confort projeté"],
            borderWidth: 0,
            borderColor: 'rgba(0,0,0,1.0)',
            backgroundColor: grd,
            hoverBackgroundColor: grd,
            data: [120],
        },
        {
            label: ["Confort optimal"],
            borderWidth: 0,
            borderColor: 'rgba(0,0,0,1.0)',
            backgroundColor: 'rgba(205,205,205,1.0)',
            hoverBackgroundColor: 'rgba(205,205,205,1.0)',
            data: [100],
        },
        ]
    },

    // Configuration options go here
    options: {
        legend: {
            display: false,
        },
        scales: {
            xAxes: [{
                stacked:false,
                ticks: {
                    beginAtZero:true,
                    max: 130,
                    display: false,
                },
                gridLines : {
                    display: false,
                    drawBorder: false,
                },
            }],
            yAxes: [{
                display:false,
                stacked:true,
                barThickness: 20,
                gridLines: {
                    display: false,
                    drawBorder: false,
                }
            }],
        },
        tooltips: {
            enabled: false,
            callbacks: {
                label: function(tooltipItems, data) { 
                    return " " + tooltipItems.xLabel + "%";
                }
            }
        },
    }
});
Chart.pluginService.register({
    afterDraw: function(chartInstance) {
        var ctx = chartInstance.chart.ctx;

        // render the value of the chart above the bar
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'right';
        ctx.textBaseline = 'center';

        chartInstance.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                if (dataset.label[i] == "Confort projeté") {
                    ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x-8, model.y + 21);
                    ctx.fillText("▲", model.x+6, model.y + 19);
                }
                else if  (dataset.label[i] == "Confort actuel") {
                    ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x-8, model.y - 14);
                    ctx.fillText("▼", model.x+6, model.y - 12);
                }
                else {
                    ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x+130, model.y - 14);
                    ctx.fillText("▼", model.x+6, model.y - 12);
                }
            }
        });
  }
});
</script>

var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var grd=ctx.createLinearGradient（0,0，canvas.width，0）；
grd.addColorStop（0.2，'红色'）；
grd.addColorStop（0.4，'橙色'）；
grd.addColorStop（0.78，'limegreen'）；
grd.addColorStop（0.9，'黑色'）；
var图表=新图表（ctx{
//我们要创建的图表类型
键入：“水平线”，
//我们的数据集的数据
数据：{
标签：[“Confort”]，
数据集：[
{
标签：[“Confort actuel”]，
边框宽度：0，
边框颜色：“rgba（0,0,0,1.0）”，
背景颜色：“rgba（0,0,0,0.2）”，
hoverBackgroundColor:'rgba（0,0,0,0）'，
数据：[64]，
},
{
标签：[“Confort projeté”]，
边框宽度：0，
边框颜色：“rgba（0,0,0,1.0）”，
背景颜色：grd，
hoverBackgroundColor:grd，
数据：[120]，
},
{
标签：[“Confort optimal”]，
边框宽度：0，
边框颜色：“rgba（0,0,0,1.0）”，
背景颜色：“rgba（205205205205,1.0）”，
hoverBackgroundColor:'rgba（205205205,1.0）'，
数据：[100]，
},
]
},
//配置选项在这里
选项：{
图例：{
显示：假，
},
比例：{
xAxes：[{
错,，
滴答声：{
贝吉纳泽罗：是的，
最高：130，
显示：假，
},
网格线：{
显示：假，
抽边线：假，
},
}],
雅克斯：[{
显示：假，
对,，
巴特希克内斯：20岁，
网格线：{
显示：假，
抽边线：假，
}
}],
},
工具提示：{
启用：false，
回调：{
标签：函数（工具提示项、数据）{
返回“+”工具提示项s.xLabel+“%”；
}
}
},
}
});
Chart.pluginService.register({
afterDraw:函数（chartInstance）{
var ctx=chartInstance.chart.ctx；
//在条形图上方呈现图表的值
ctx.font=Chart.helpers.fontString（Chart.defaults.global.defaultFontSize，'normal'，Chart.defaults.global.defaultFontFamily）；
ctx.textAlign='right'；
ctx.textb基线='中心'；
chartInstance.data.datasets.forEach（函数（数据集）{
对于（var i=0；i

如您所见，我尝试使用canvas.width作为渐变（而不是之前的1024）。但这会使我的画布崩溃，我不知道为什么

有人能帮我吗

---

谢谢！

您应该使用以下命令

ctx.canvas.width

var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var grd=ctx.createLinearGradient（0,0，ctx.canvas.width，0）；
grd.addColorStop（0.2，'红色'）；
grd.addColorStop（0.4，'橙色'）；
grd.addColorStop（0.78，'limegreen'）；
grd.addColorStop（0.9，'黑色'）；
var图表=新图表（ctx{
//我们要创建的图表类型
键入：“水平线”，
//我们的数据集的数据
数据：{
标签：[“Confort”]，
数据集：[{
标签：[“Confort actuel”]，
边框宽度：0，
边框颜色：“rgba（0,0,0,1.0）”，
背景颜色：“rgba（0,0,0,0.2）”，
hoverBackgroundColor:'rgba（0,0,0,0）'，
数据：[64]，
}, {
标签：[“Confort projeté”]，
边框宽度：0，
边框颜色：“rgba（0,0,0,1.0）”，
背景颜色：grd，
hoverBackgroundColor:grd，
数据：[120]，
}, {
标签：[“Confort optimal”]，
边框宽度：0，
边框颜色：“rgba（0,0,0,1.0）”，
背景颜色：“rgba（205205205205,1.0）”，
hoverBackgroundColor:'rgba（205205205,1.0）'，
数据：[100]，
}, ]
},
//配置选项在这里
选项：{
图例：{
显示：假，
},
比例：{
xAxes：[{
错,，
滴答声：{
贝吉纳泽罗：是的，
最高：130，
显示：假，
},
网格线：{
显示：假，
抽边线：假，
},
}],
雅克斯：[{
显示：假，
对,，
巴特希克内斯：20岁，
网格线：{
显示：假，
抽边线：假，
}
}],
},
工具提示：{
启用：false，
回调：{
标签：函数（工具提示项、数据）{
返回“+”工具提示项s.xLabel+“%”；
}
}
},
}
});
Chart.pluginService.register({
afterDraw:函数（chartInstance）{
var-ct