2

我在使用画布时遇到问题。请参见下面的代码。

HTML

<canvas id="canvas" width="400" height="400"></canvas>    
<input id="but" type="button" value="clear canvas" onclick="ClearCanvas()">

JS

can = document.getElementById('canvas');
ctx = can.getContext("2d");

ctx.fillStyle = 'rgb(205,190,245)';
ctx.fillRect(0, 0, can.width, can.height);

ctx.scale(0.4, 0.4);
ctx.fillStyle = 'rgb(105,180,235)';
ctx.fillRect(0, 0, can.width, can.height);

$("#but").click(function()
{
    var ctx = document.getElementById('canvas').getContext("2d");

    ctx.scale(1, 1);
    ctx.clearRect(0, 0, can.width, can.height);
});

当我点击“清除画布”按钮时，它并没有清除整个画布。它只是清除缩放的部分。缩放后如何清除整个画布？

你可以在这个FIDDLE中现场直播

注意：在 FF 中没有问题。

4

1 回答 1

2

您的线路：

ctx.scale(1, 1);

应该读：

ctx.scale(2.5, 2.5);

最初，您将比例从 1 减少到 0.4，比原始比例小 2.5 倍。(1 / 0.4 = 2.5)

将比例设置为 1 将按 100% 缩放，即没有变化。

其他选项包括：

  • 替换 ctx.scale(1, 1); 与 ctx.setTransform(1, 0, 0, 1, 0, 0);
  • 使用 Save() 和 Restore()链接
于 2013-01-30T07:34:57.403 回答