HTML5 Canvas 行的宽度不一致答案

【问题标题】：HTML5 Canvas lines not having consistent widthHTML5 Canvas 行的宽度不一致
【发布时间】：2013-11-07 15:45:03
【问题描述】：

我正在使用以下代码在 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。当我删除高度时，矩形不再扭曲。

【问题讨论】：

你的坐标数组中的值是什么——它们可以是非整数吗？在 IE、Chrome、FF 中使用 (11,10,150,100) 时我完全没有得到任何失真。
输入的 vales 可以改变，但一个例子是 3,65,43,60
使用这些坐标我没有得到任何失真。您是在移动设备还是电视显示器上观看？
不，我正在笔记本电脑上查看。
查看对原始帖子的编辑。

标签： html canvas html5-canvas

【解决方案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;
    }
  });
}

【讨论】：

【解决方案2】：

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

【讨论】：