Canvas 坐标系

在了解Canvas坐标系之前,先看看我们比较熟悉的一些坐标系统。

笛卡坐标系

TIP

笛卡坐标系(Cartesian Coordinate system),这个坐标系统也称为直角坐标系,是一种正交坐标系。

二维的直角坐标系是由两条相互垂直、0点重合的数轴构成的。在平面内,任何一点的坐标是根据数轴上对应的点的坐标设定的。在平面内,任何一点与坐标的对应关系,类似于数轴上点与坐标的对应关系。

可以看到,每个点都有一双与之关联的值。这些被称为坐标点,通常表示为(x,y)。x位于水平轴上,y位于垂直轴上。其中(0,0)点是坐标原点。x轴从原点向右方向为正值,反之为负值,y轴从原点向上为正值,反之为负值。

Web 坐标系统

TIP

在Web页面中,或者说我们的浏览器中也有一个坐标系统。只是他和我们数学中的坐标系统不一样。Web的坐标系统的原点是在屏幕(浏览器屏幕)的左上角。

它有两个坐标轴,x轴(水平轴)和y轴(垂直轴)。两轴的交汇点(左上角)为坐标原点(0,0)。原点沿x轴向右是正值,原点沿y轴向下是正值。

Canvas 坐标系统

在Canvas中有2D和3D之分,可以通过getContext('2d')让Canvas得到一个2D环境。言外之意,它还有一个3D环境。这样一来,在Canvas中坐标系统也是有分的。

Canvas 2D 坐标系统

TIP

在Canvas中2D环境中其坐标系统和Web的坐标系统是一致的。坐标原点(0,0)在<canvas> 画布的的左上角。同样的分为x和y两个轴。x轴向右为正值,y轴向下为正值。同样在canvas中,是没有办法直接看到。但同样,在canvas中使用负坐标不会导致canvas不能使用,只不过会移到canvas画布的外面。

比如我们在画布中绘制一个矩形:

ctx.fillStyle = '#f36';
ctx.fillRect(15,15,20,20);

Canvas 3D 坐标系统

TIP

3D坐标系统多了一个z轴,用来描述深度。比如说一个物体在绘制时,在屏幕之内或之外多远的距离。这里简单的介绍一下3D坐标系统。

如图所示,x轴从左向右在水平方向延展,y轴纵向延展,z轴的正值从屏幕中穿出。如果你熟悉2D坐标系统的概念,那么过渡到3D坐标系统会相当直观容易。

绘制2D坐标系

var myCanvas = document.getElementById('canvas')
var ctx = myCanvas.getContext('2d')
drawScreen()
function drawScreen() {
  // 横线与竖线的是距
  var dx = 50;
  var dy = 50;
  // 初始坐标原点
  var x = 0;
  var y = 0;
  var w = myCanvas.width;
  var h = myCanvas.height;
  // 单个步长所表示的长度
  var xy = 10;
  ctx.lineWidth = .1;
  ctx.strokeStyle = 'rgba(100,100,100,.4)'
  // 画横线
  while (y < h) {
    y += dy;
    ctx.moveTo(x, y);
    ctx.lineTo(w, y);
    ctx.stroke();
    //横坐标的数字
    ctx.fillText(xy, x, y - 2);
    xy += 10;
  }
  // 画竖线
  y = 0;
  xy = 10;
  while (x < w) {
    x = x + dx;
    ctx.moveTo(x, y);
    ctx.lineTo(x, h);
    ctx.stroke(); //纵坐标的数字
    ctx.fillText(xy, x + 2, 10);
    xy += 10;
  }
}

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress