Question

我在使用canvas时遇到问题。见下面的代码。

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没问题。

Answer 1

你的专栏：

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）;
使用保存（）和恢复（）link

如何在缩放后清除HTML5画布

1 个答案: