无法更改HTML 5画布中的线宽

Question

我建立了一个非常简单的应用程序，通过单击“ Add按钮可以在图像中绘制矩形。 但是，无论我更改了canvas stroke什么属性，这些属性都保持不变。

在该示例中， context.lineWidth已设置为1。但是，单击“ Add按钮后绘制的矩形实际上具有更宽的线宽，并且具有一定的透明度（我希望该线是实线而不是完全不透明的） 。

有人可以在这里提供一些帮助吗？

这是我在Fiddle中的代码。

 var img = $('#sourceImage'); var addButton = $('#addButton'); addButton.offset({ top: img.offset().top + img.height() + 10 }); var boundingBoxId = 'IMG00001_01'; addButton.click(function () { console.log(boundingBoxId); $('<canvas>').attr({ id: boundingBoxId }).css({ width: img.width() + 'px', height: img.height() + 'px', position: 'absolute' }).appendTo('#drawArea'); var canvas = document.getElementById(boundingBoxId); var context = canvas.getContext('2d'); context.strokeStyle = 'red'; context.rect(0, 0, 50, 50); context.lineWidth = 1; context.stroke(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="drawArea"> <img id="sourceImage" src="http://www.sixt.com/uploads/pics/bmw_5_sixt-car_rental-B.png" style="position: absolute; border: 1px solid #000000" /> </div> <button id="addButton">Add</button> 

Answer 1

您正在使用CSS设置位图的大小。 这将仅适用于元素本身，而不适用于位图。 位图的默认大小为300x150，这是您看到的被拉伸的大小。

设置元素的属性以影响位图，例如：

$('<canvas>').attr({
    id: boundingBoxId
}).attr({
    width: img.width(),      // important: attributes affect bitmap
    height: img.height()
}).css({
    position: 'absolute'     // affects element
}).appendTo('#drawArea');

更新小提琴