0

jCanvas を試して、HTML 5 キャンバスについて理解を深めようとしています。しかし、私は奇妙な問題を経験しています。

次のコードを使用して、キャンバス全体を埋める四角形を描画しようとしています:

HTML

<canvas width=600 height=400></canvas>

JS:

var canvas = $("canvas");

//white background in canvas
canvas.drawRect({
        fillStyle: "#FFF",
        x: 0, y: 0,
        width: 600,
        height: 400
 });

これは長方形を出力しますが、意図したサイズの半分しかありません。x、y座標を半幅/高さに変更すると、期待される結果が得られます。しかし、私が理解していることから、x、yは左上隅から開始する必要がありますよね？

フィドル

4

1 に答える 1

3

私は答えを見つけました。どうやら、キャンバスには、中央ではなく左上から座標をカウントするための追加パラメーターが 1 つ必要です。

js コードを次のように変更しました。

var canvas = $("canvas");
//white background in canvas
canvas.drawRect({
        fillStyle: "#FFF",
        x: 0, y: 0,
        width: 600,
        height: 400,
        fromCenter: false
    });

そして今、期待どおりに動作します！

このメソッドを呼び出して、デフォルトの動作を変更することもできます。

$.jCanvas({
    fromCenter: false
});

スクリプトの冒頭で

于 2013-12-08T10:59:05.647 に答える