Question

我正试图绕过HTML 5画布，尝试使用jCanvas。但我遇到了一个奇怪的问题。

我试图使用以下代码绘制一个应该填满整个画布的矩形：

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应该从左上角开始，对吗？

Fiddle

Answer 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
});

在剧本的开头

Jcanvas坐标不是从（0,0）开始

1 个答案: