特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
上一节我们做好了使用Canvas的准备工作,但并没有深入的介绍如何使用Canvas,比如怎么绘制图形,怎么做Canvas动画等。但并不用着急,随着我们后面的深入学习,这一切都会知道的。在深入学习之前,我们有必要先了解Canvas里的坐标系统。那么这一节,就先来了解Canvas的坐标系统。
笛卡坐标系
在数学里,我们学过一种坐标系统,叫作笛卡坐标系(Cartesian Coordinate system),这个坐标系统也称为直角坐标系,是一种正交坐标系。
二维的直角坐标系是由两条相互垂直、0
点重合的数轴构成的。在平面内,任何一点的坐标是根据数轴上对应的点的坐标设定的。在平面内,任何一点与坐标的对应关系,类似于数轴上点与坐标的对应关系。
有关于笛卡坐标系详细介绍可以在维基百科中了解。
可能你对笛卡坐标系有了一定的了解,咱们在此基础上来看一个简单的示例,比如下图:
你可以看到,每个点都有一双与之关联的值。这些被称为坐标点,通常表示为(x,y)
。x
位于水平轴上,y
位于垂直轴上。其中(0,0)
点是坐标原点。x
轴从原点向右方向为正值,反之为负值,y
轴从原点向上为正值,反之为负值。
正如上图所示,(2,3)
表示x = 2
,y=3
。我们从坐标原点,沿x
轴向右2
格位置处画一条与y
轴平行的线;另外沿y
轴向上3
格位置处画一条与x
轴平行的线。这两条线交汇处就是(2, 3)
的坐标点。
是不是很好理解。
Web中的坐标系统
上面是我们印象中的数学坐标系统,但在Web页面中,或者说我们的浏览器中也有一个坐标系统。只是他和我们数学中的坐标系统不一样。Web的坐标系统的原点是在屏幕(浏览器屏幕)的左上角。如下图所示:
如需转载,烦请注明出处:https://www.w3cplus.com/canvas/canvas-coordinate-system.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!