我正在處理一個. php文件，我想在畫布上畫一些矩形。我認為我使用它們是正確的，但由于某種原因，規模是錯誤的。

我這里有一個畫布為450像素* 750像素的div:

echo '<h2><strong>Supermarket</strong> Map</h2>';
echo '<div class="wrapper_map" style="width: 750px; height: 450px; position:relative; margin: 0 auto;"><canvas id="myCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas></div>';

我想在左上角畫一個矩形，寬150像素，高150像素，基本上是一個正方形。

我用這段代碼來做這件事:

echo '<script>';
echo 'var canvas = document.getElementById("myCanvas");';
echo 'var ctx = canvas.getContext("2d");';

echo 'ctx.fillStyle = "' . $color . '";';
echo 'ctx.fillRect(0,0,150,150);';
echo '</script>';

我想我應該得到正確的結果，盡管我得到的是一個隨機尺寸的矩形:

正如我們在照片中看到的，畫布的尺寸是正確的，但是矩形比150像素* 150像素大得多。

有人知道解決這個問題的方法嗎？

畫布需要這樣編輯:

<canvas id="myCanvas" width="750"; height="450"; style="position: absolute; top: 0; left: 0;"></canvas>

通過聲明寬度和高度，我確保畫布的大小不會有任何變化