我遇到了HTML5 Canvas標記的問題,並多次調整縮放比例。在縮放兩次之後,即使我正在調整縮放級別,畫布也只使用可用畫布高度的一部分,寬度爲&。多畫布縮放行爲不正常
<html>
<head>
<script>
var ctx;
var nScale = 1.00;
function pageLoad() {
ctx=document.getElementById('cnvUni').getContext('2d');
// canvas on page load is 500x500
drawGrid(); // 5 boxes across & 5 down
zoom(0.5); // canvas should be now zoomed out to 1000x1000
drawGrid(); // 10 boxes across & 10 down
zoom(0.5); // effective zoom is now 0.25 = 2000x2000
drawGrid(); // should be 20 boxes across & 20 down
// NOTE: At this point, the grid is drawing boxes @ 20x20 but only using 1/4 of the
// canvas size.
}
function zoom(nZoomLevel) {
nScale = nZoomLevel * nScale
ctx.scale(nScale,nScale);
}
function drawGrid() {
var nWidth, nHeight;
nWidth = Math.floor(ctx.canvas.width/nScale);
nHeight = Math.floor(ctx.canvas.height/nScale);
var nGridSize = 100;
var nGridY = 0;
var nGridX = 0;
// sets a random colour each time grid is drawn.
ctx.strokeStyle = 'rgb(' + Math.floor(Math.random()*256) + ',' + Math.floor(Math.random()*256) + ',' + Math.floor(Math.random()*256) + ')';
for (nGridY=0;nGridY < nHeight;nGridY+=nGridSize) {
for (nGridX=0;nGridX < nWidth;nGridX+=nGridSize) {
// draw the box;
ctx.strokeRect(nGridX, nGridY, nGridSize, nGridSize);
}
}
}
</script>
</head>
<body onload="pageLoad();">
<canvas id="cnvUni" width="500" height="500">
Canvas doesn't work.
</canvas>
</body>
</html>
如果我是通過2繪製網格最後一次它會繪製出整個畫布大小時,乘高&寬度,但我想不出爲什麼這樣做是必要的。
我想知道的是:
有沒有一種方法來查詢畫布背景下找出的刻度值(或計算出的高度/寬度)是什麼?還是我正確地處理這個問題並且自己跟蹤價值?
如果是這樣,那麼我認爲它必須是我的數學,這是搞砸了這一點;我無法指出它。我相信我只是太接近這個問題,並沒有看到這個問題。另一組眼睛會有所幫助。
任何意見,將不勝感激。
謝謝!
嗨Kieranmaine - 感謝您的評論;我認爲,儘管我正在尋找一種方法來計算比例尺/高度/寬度而不使用保存/恢復功能。這更多的是試圖找出公式,而不是得到結果。 – michaely 2010-07-09 00:47:57
我已經找到了問題;我的回答如下。謝謝! – michaely 2010-07-09 18:01:01