html - HTML5 Canvas 行​​的宽度不一致

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 来调整画布的大小，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”（因此只接受像素？）。你不会再得到失真了。