畫布線寬度在畫布寬度變化時發生變化

我有我希望改變的寬度的畫布元件。我知道這很容易，但是當寬度變化時，當寬度變得更窄/更寬時，圖形中的線條也變得更薄/更厚。

我可能通過重繪圖像和縮放和lineWidth等來玩弄周圍，但我不想每次寬度改變時重新繪製（我正在使用setInterval改變寬度，所以我不會我認爲每40到50毫秒重新繪製 - 毫秒是一個合理/可行的解決方案）。

任何人都可以想辦法解決這個問題嗎？

一個簡單的解釋，解釋，我有：

ctx.beginPath() 
ctx.strokeStyle="#000000"; 
ctx.lineWidth=1; 
ctx.strokeRect(10, 10, 400, 400);

所以當的畫布的變化寬度，線寬變得小於1個像素，到它變爲「斷」和消失的點。

在寫這個問題，我認爲越來越多，唯一的解決辦法是重新繪製圖像，但請讓我知道你的想法。

加成*** 我用這改變寬度，希望這是有道理的：

repeater = setInterval(function() { 
    $(".action").css("width", originalWidth - borderRight - borderLeft + (mouseX - clickX)); 
}, 40);

我檢查時，鼠標移到畫布的右側邊緣，然後點擊「鼠標按下」 originalWidth，borderRight，borderLeft ，mouseX和clickX被設置在中繼器的外部，所以當鼠標左右移動時，寬度增加/減少。當然，間隔在「mouseup」上清除。

謝謝邁克

來源

2015-09-27 Mike

你如何改變畫布的寬度？有一個正確的方法和一個錯誤的方式來做到這一點。 – Philipp

好吧，公正的評論！我使用setInterval並使用jQuery .css（「width」，newWidth）更改寬度。這是我所做的自定義調整大小功能。我會更新我的問題，希望能更好地解釋一下。 – Mike

不要使用CSS來重新縮放畫布。在使用CSS時，可以在HTML佈局中縮放畫布的輸出，但不要更改內部分辨率。

更改畫布HTML節點的寬度和高度屬性來代替。

來源

2015-09-27 11:32:47 Philipp

謝謝你。你將如何改變setInterval函數？我嘗試將.css改爲.attr，並嘗試了document.getElementById（「action」）。setAttribute（「width」，newWidth） - 在這個例子中，當然將「action」改爲ID而不是類，這兩幅圖畫似乎消失了？我誤解了你，你是否介意解答你的答案？你可以說，我不是這方面的專家。 – Mike

儘管在消失後將高度記錄到控制檯時，高度已更改，但繪圖不再存在......如果這有助於確定我做錯了什麼？ – Mike

@Mike，改變canvas元素的寬度或高度會清除它，然後你需要重新繪製整個事物。但菲利普說得對，不要使用CSS來調整畫布元素的大小。 – Kaiido

畫布線寬度在畫布寬度變化時發生變化

回答

相關問題