無法更改HTML 5畫布中的線寬

-1

我構建了一個非常簡單的應用程序，通過單擊Add按鈕在圖像中繪製矩形。但是，不管strokecanvas我改變了哪些屬性，屬性都保持不變。無法更改HTML 5畫布中的線寬

在該示例中，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>

來源

2015-06-09 mintaka

您正在使用CSS來設置位圖的大小。這隻適用於元素本身，而不適用於位圖。位圖的默認大小爲300x150，這是您看到的延伸。

設置元素的屬性影響的位圖，如：

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

Updated fiddle

來源

2015-06-09 22:00:53 K3N

我明白了。非常感謝！我是HTML 5和Javascript的新手。你的回答今天幫助我很多！ – mintaka

嗨，我還有一個問題。修改代碼後，該行仍然有點透明（如在更新的提琴中;它似乎只發生在線寬爲1時）。我可以知道它爲什麼透明嗎？我試圖設置Alpha通道，但沒有找到任何運氣。 – mintaka

@mintaka這是由於子像素。畫布將網格中的像素居中，可以像這樣抵消0.5像素：http://jsfiddle.net/cqy12b5m/12/ – K3N

無法更改HTML 5畫布中的線寬

回答

相關問題