多画布缩放行为不正常

我遇到了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绘制网格最后一次它会绘制出整个画布大小时，乘高&宽度，但我想不出为什么这样做是必要的。

我想知道的是：

有没有一种方法来查询画布背景下找出的刻度值（或计算出的高度/宽度）是什么？还是我正确地处理这个问题并且自己跟踪价值？
如果是这样，那么我认为它必须是我的数学，这是搞砸了这一点;我无法指出它。我相信我只是太接近这个问题，并没有看到这个问题。另一组眼睛会有所帮助。

任何意见，将不胜感激。

谢谢！

来源

2010-07-07 michaely

我有一个版本在http://jsfiddle.net/sBXTn/5/上工作，不使用保存/恢复。这是代码的变化：

nScale = nZoomLevel * nScale 
ctx.scale(nZoomLevel, nZoomLevel);

以前使用ctx.scale(nScale, nScale)意味着当通过缩放0.25（0.5两次）你用0.25上，这是1000×1000的上下文变焦。这意味着它将尺寸增加到4000x4000。使用nZoomLevel意味着您正在放大与当前上下文的维度相关的内容。

来源

2010-07-08 22:26:00 Castrohenge

嗨Kieranmaine - 感谢您的评论;我认为，尽管我正在寻找一种方法来计算比例尺/高度/宽度而不使用保存/恢复功能。这更多的是试图找出公式，而不是得到结果。 – michaely 2010-07-09 00:47:57

我已经找到了问题;我的回答如下。谢谢！ – michaely 2010-07-09 18:01:01

我在这条路上走错了路，我感到很傻。我的数学在计算有效刻度值时是正确的（1 * 0.5 = 0.5，然后将其再缩小0.5再做= 0.25），但我正在做的是计算高度的原始宽度&高度，而不是更新的高度宽度&高度。

因此，如果我将原始尺寸缩小到0.5，原始500x500的尺寸将为1000x1000。将其进一步缩小0.5，有效范围为0.25，但新的高度应为4000x4000（通过按比例缩放1000,0.25以及不是按照0.25）。

下面是更新后的代码：

var ctx; 
var nScale = 1.00; 
var nEffWidth, nEffHeight; 

function pageLoad() { 
    ctx=document.getElementById('cnvUni').getContext('2d'); 

    nEffWidth = ctx.canvas.width; 
    nEffHeight = ctx.canvas.height; 

    // 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 = 4000x4000 based on new scaled width/height 
    drawGrid(); // should be 40 boxes across & 40 down 


} 

function zoom(nZoomLevel) { 
    nScale = nZoomLevel * nScale 
    nEffHeight = nEffHeight/nScale; 
    nEffWidth = nEffWidth/nScale; 
    ctx.scale(nScale,nScale); 
} 

function drawGrid() { 

    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 < nEffHeight;nGridY+=nGridSize) { 

    for (nGridX=0;nGridX < nEffWidth;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>

感谢大家谁了吧！

来源

2010-07-09 18:00:34 michaely

多画布缩放行为不正常

回答

相关问题