Question

我正在使用以下代码在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();

问题是两条垂直线比两条水平线厚很多，是什么造成的呢？

编辑：我的高度设置为89，宽度设置为802。当我移除高度时，矩形不再扭曲。

Answer 1

我正在使用CSS而不是JavaScript来调整我的画布，这是缩放画布而不是实际调整它的大小。我使用下面的代码解决了这个问题。

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

Answer 2

有点迟到但有同样的问题。在我的代码中，我使用style.width和style.height来改变画布的大小。直接使用宽度和高度。最后没有“px”（因此只接受像素？）。你不会再失真了。

HTML5 Canvas行没有一致的宽度

2 个答案: