0

以下のコードを使用して、HTML5 キャンバスに四角形を描画しています。

canvasId = $('#objectData').find('#miImages '+imageId+' .imageContainer canvas').attr("id");
canvas = document.getElementById(canvasId);
context = canvas.getContext("2d");
context.beginPath();
context.rect(coordinateArray[0],coordinateArray[1],coordinateArray[2],coordinateArray[3]);  
context.lineWidth = 2;
context.strokeStyle = "DarkBlue";
context.stroke();

問題は、2 つの垂直線が 2 つの水平線よりもはるかに太いことです。これは何が原因でしょうか?

編集: 高さを に設定し89、幅を に設定しました802。高さを削除すると、長方形が歪まなくなりました。

4

2 に答える 2

0

ちょっと遅いですが、同じ問題がありました。コードのどこかで、style.width と style.height を使用してキャンバスのサイズを変更していました。代わりに幅と高さを直接使用してください。最後に「px」がありません（したがって、ピクセルのみを受け入れますか？）。もう歪みはありません。

于 2013-11-07T07:45:03.290 に答える
0

実際にキャンバスのサイズを変更するのではなく、キャンバスをスケーリングする JavaScript ではなく、CSS を使用してキャンバスのサイズを変更していました。以下のコードを使用してこれを修正しました。

function applyCanvasSize(){
  $("#objectData img").on('load', function(){
    var theHeight = $(this).height();
    var canvasId = $(this).next('canvas').attr('id');
    var canvas = document.getElementById(canvasId);
    if (canvas.getContext) { 
      canvas.width = 802;
      canvas.height = theHeight;
    }
  });
}
于 2013-03-05T14:44:46.490 に答える