文本在我的画布上垂直拉伸，使其无法读取

Question

我有一个画布，我正在OpenLayers地图上绘制。画布以渐变颜色着色，现在我尝试在其上添加文本。

然而，文本似乎被拉长使其完全不可读。

function createSpeedBar(min, max, speeds) {
    //List of integer speeds
    var fullSpeeds = [];
    //List of unique speed values (no duplicates)
    var uniqueSpeeds = [];

    //Filling fullSpeeds using minimum and maximum values
    for (i = min; i <= max; i++) {
        fullSpeeds.push(i);
    }

    //Filling uniqueSpeeds with unique values
    $.each(speeds, function (i, el) {
        if ($.inArray(el, uniqueSpeeds) === -1) uniqueSpeeds.push(el);
    });

    //Sorting uniqueSpeeds (low to high)
    uniqueSpeeds = uniqueSpeeds.sort(function (a, b) {
        return a - b;
    });

    //Getting canvas element
    var canvas = document.getElementById("speedList");
    var context = canvas.getContext("2d");
    context.rect(0, 0, canvas.width, canvas.height);

    var grd = context.createLinearGradient(0, 0, 0, 170);
    var hslMin = 0;
    var hslMax = 240;

    //Defining hslColors using uniqueSpeeds
    var hslValues = uniqueSpeeds.map(function (value) {
        if ($.inArray(value, fullSpeeds)){
            return {
                h: Math.ceil(((value - min) / (max - min)) * (hslMax - hslMin) + hslMin),
                s: 100,
                l: 50,
                full: true,
                speed: value
            };
        } else {
            return {
                h: Math.ceil(((value - min) / (max - min)) * (hslMax - hslMin) + hslMin),
                s: 100,
                l: 50,
                full: false
            };
        };
    });

    var count = 1;
    var length = hslValues.length;

    //Gradient coloring using hslColors
    hslValues.forEach(function (value) {
        var color = 'hsl(' + value.h + ',' + value.s + '%,' + value.l +    '%)';
        grd.addColorStop(count / length, color)
        count += 1;
    });

    context.fillStyle = grd;
    context.fill();

    //Setting up coloring and drawing of text
    count = 1
    var height = canvas.height;
    var width = canvas.width;
    var elementHeight = height / length;

    //Drawing text on canvas
    hslValues.forEach(function (value) {
        context.font = "12px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "black";
        if (value.full === true) {
            context.fillText(value.speed, width / 2, ((elementHeight / 2) + elementHeight * count));
        }
        count += 1;
    });
}

可能很清楚，我正在尝试创建一个显示地图上速度强度的条形图，我在其中为某些标记着色。但是画布上的文字是这样的：

现在我已经使画布的高度继承了地图的高度500.画布的宽度是使用css手动设置的：

的HTML

<div id="map" class="map">
    <canvas id="speedList"></canvas>
</div>

的CSS

#map {
    position: relative;
    height: 500px;
}

#speedList {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 1000;
    height: inherit;
    margin: 0;
    padding: 0;
}

我目前正在制作一个小提琴，但是需要一点时间来重现，我打赌这个问题不是那么大，所以希望有人知道如何在我完成小提琴之前修复它。

Answer 1

这里的主要问题是对canvas元素的宽度和高度的CSS调整。

如果有助于理解问题，请考虑<canvas>，就像你想到<img/>一样，如果你采用img，并给它一个宽度和高度为50 x 500 ，它也会伸展。

修复是为了确保在处理它的内容之前将画布元素本身的宽度设置为高度，如下所示：

<canvas id="speedList" width="20" height="500"></canvas>

然后您还需要确保删除CSS中的宽度和高度属性，如下所示：

#map {
    position: relative;
    height: 500px;
}

#speedList {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    z-index: 1000;
    margin: 0;
    padding: 0;
}