[英]Jcanvas coordinates don't start at (0,0)
I'm trying to get my head around HTML 5 canvas, trying jCanvas. 我正在尝试使用jCanvas来了解HTML 5 canvas。 But i'm experiencing a weird problem. 但是我遇到一个奇怪的问题。
Im trying to draw an rectangle that should fill the whole canvas using the following code: 我试图使用以下代码绘制一个矩形,该矩形应填充整个画布:
HTML 的HTML
<canvas width=600 height=400></canvas>
JS: JS:
var canvas = $("canvas");
//white background in canvas
canvas.drawRect({
fillStyle: "#FFF",
x: 0, y: 0,
width: 600,
height: 400
});
This outputs a rectangle, but only half the intended size. 这将输出一个矩形,但只有预期大小的一半。 If i change the x,y coordinates to half width/height, then i get the expected result. 如果我将x,y坐标更改为一半的宽度/高度,则可以得到预期的结果。 But from what I understand x,y should start from top left corner, right? 但是据我了解,x,y应该从左上角开始,对吗?
I found the Answer. 我找到答案了。 Apperently canvas needs one additional parameter to count coordinates from top left instead of center. 显然,canvas需要一个附加参数来从左上角而不是中心开始计算坐标。
I changed the js code to: 我将js代码更改为:
var canvas = $("canvas");
//white background in canvas
canvas.drawRect({
fillStyle: "#FFF",
x: 0, y: 0,
width: 600,
height: 400,
fromCenter: false
});
And now it works as expected! 现在,它可以正常工作了!
You can also change the default behavior by calling this method: 您还可以通过调用以下方法来更改默认行为:
$.jCanvas({
fromCenter: false
});
In the beginning of the script 在脚本开头
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.