0

我试图了解 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,y 应该从左上角开始，对吧？

小提琴

4

1 回答 1

3

我找到了答案。显然画布需要一个额外的参数来计算从左上角而不是中心的坐标。

我将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 回答