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です。（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 に答える