Canvas 单位和坐标体系

既然我们已经能够使用 getContext("2d") 获取渲染上下文对象,那么我们就可以使用这个对象来绘制图形了

比如我们要绘制一个矩形 rect,那么我们要怎么做呢,首先,我们要确定一个起始点 (一般是左上角),然后确定矩形的长和宽,就像下面这样

  1. 确定起点位置(x1,y1),例如(100,100)

  2. 确定矩形的长和宽(width,height), 例如(200,100)

    大家有没有发现,如果加上起始坐标,其实就是确定了终点坐标(x2,y2)

    x2 = x1 + width  = 100 + 200 = 300
    y2 = y1 + height = 100 + 100 = 200
    
  3. 根据矩形的特性,确定另外两个点的坐标 (300,100) 和 (100,200)

  4. 然后用直线把这些点连接起来,画矩形

单位和坐标体系

大家有没有发现很重要的一点,就是绘画图形当中,单位、坐标原点、坐标方向是最重要的

  1. 单位决定了一个数值,比如 100,在画布上是多长
  2. 坐标原点 (0,0) 决定了另一个坐标 (100,100) 在画布上的位置
  3. 坐标方向决定了另一个坐标 (100,100) 是在坐标原点的哪个方向

Canvas 中的单位和坐标体系

因为 getContext("2d") 返回的是一个平面图形,所以采用的就是二维网格

  1. canvas 采用的是左手背面坐标体系 (高中的数学知识...),就是拿出左手,背面朝上,手指伸直,拇指与食指成 90度,让拇指对着自己的心脏,这时候拇指的方向就是 y 轴的正方向,食指的方向就是 x 轴的正方向

  2. canvas 的坐标原点(0,0) 在左上角

  3. canvas 以像素(px) 为单位,这个 canvas 的长宽设定是同一个单位类型

Canvas 坐标演示

可以将鼠标移动的矩形框上,显示定位坐标

X
Y



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.