javascript - 文本在我的 Canvas 上被垂直拉伸(stretch)，使其不可读

Question

我有一个在 OpenLayers map 上绘制的 Canvas 。 Canvas 以渐变颜色着色，现在我正尝试在其上添加文本。

然而，文本似乎被拉伸(stretch)，使其完全不可读。

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;
    });
}

可能很明显，我正在尝试创建一个条形图来显示 map 上的速度强度，我已经在其中标记了一些颜色。然而 Canvas 上的文字是这样的:

现在我已经让 Canvas 的高度继承了 map 的高度，即 500。 Canvas 的宽度是使用 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;
}

我目前正在研究 Fiddle，但重现它需要一点时间，我敢打赌问题不是那么大，所以希望有人知道如何在我完成 Fiddle 之前修复它。

Answer 1

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

如果有助于理解问题，想到<canvas>与您想到的方式相同 <img/> ，如果你拿一个 img，并给它一个宽度和高度 50 x 500 , 它也会拉伸(stretch)。

解决方法是确保在处理内容之前设置 Canvas 元素本身的宽度和高度，如下所示:

<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;
}