HTML Canvas Width無法調整大小

我想調整此Canvas寬度，但我不能。無論如何 - 畫布寬度是屏幕的100％...更改寬度和高度只會改變比例。也許有人知道問題在哪裏？HTML Canvas Width無法調整大小

<canvas id="ini" width="500" height="300"></canvas>

https://jsfiddle.net/schme16/xfyvvup8/20/

https://github.com/schme16/Chart.js-RangeSlider

來源

2017-03-20 Darius Kaziukevičius

只是傳遞['響應：FALSE'選項]（http://www.chartjs.org/docs/#chart-configuration-creating-a-chart-with-options）在'chartOptions'字典。 https://jsfiddle.net/xfyvvup8/89/ – Kaiido

我猜想，您正在使用的圖表庫做一些調整大小。但是，因爲我沒有時間閱讀圖書館的代碼，這裏是一個解決方法您：

<div class="container"> 
    <canvas id="ini" width="500" height="300"></canvas> 
</div> 

.container { 
    width: 500px; 
}

也就是說，把canvas元素的另一個元素中有一個固定的寬度。

演示：https://jsfiddle.net/xfyvvup8/88/

來源

2017-03-20 02:36:36 nnnnnn

您可以使用畫布DOM的.height和.width屬性用於此。它可以與高度和寬度屬性相同。您需要在JS代碼中調整數值。

var canvas = document.getElementsByTagName('canvas')[0]; 
canvas.height = 500; 
canvas.width = 500;

這些是畫布的邏輯尺寸。現在您可以設置.style.height和.style.width CSS屬性。如果您未設置樣式屬性，則畫布的固有尺寸將用作顯示尺寸。然後，如果您設置CSS屬性並且它們與畫布尺寸不同，則您的內容將由瀏覽器渲染和縮放。假設你在上面添加這些行。

canvas.style.width = '750px'; 
canvas.style.height = '500px';

來源

2017-03-20 02:49:35 Tirtha

HTML Canvas Width無法調整大小

回答

相關問題