テキストがキャンバス上に縦に引き伸ばされて判読不能になる

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

それが明確であるかもしれませんが、私はいくつかのマーカーで着色している​​地図上に高速の強度を表示するバーを作成しようとしています。しかし、キャンバス上のテキストは、次のように出てくる：

今、私は、キャンバスの高さは、キャンバスの幅は、CSSを使用して手動で設定されている500ですマップの高さを継承してきました：

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

ここでの主な問題は、キャンバス要素の幅と高さのCSS調整です。

それが問題を理解するのに役立ちます場合は、IMGを取り、それを50 x 500の幅と高さを与えれば、それはあまりにも伸びるだろう、<canvas>のあなたが<img/>を考えるのと同じ方法だと思います。それがこのように、コンテンツのプロセスの前に

修正は、あなたが幅に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; 
}