通明透彻canvas-相关概念

canvas的上下文以及坐标

---

上次讲到canvas的上下文是通过getContext('2d');方法来获取，canvas在执行上下文的渲染时，每次渲染，都会抛弃之前渲染的数据，这也是在canvas中做交互的难题，使用isPointInPath函数来判断用户的选择情况，却也会有些困难的地方，比如canvas只能记住最后一次渲染的数据，所以函数也只能对最后一次渲染的数据进行渲染，而且函数对于fillRect与strokeRect并不友好，很容易判断错误，这个会在后面做详细讲解。

2D坐标系
在canvas的2D操作中，坐标系是一个很重要的概念，有过前端开发的会知道，获取鼠标的点击坐标是通过ClientX与ClientY属性，但是那么如何将鼠标的坐标转换为canvas内的坐标呢。

function windowToCanvas(canvas,x,y){
    var box=canvas.getBoundingClientRect();
    return site={
        x:x-box.left,
        y:y-box.top
    };
}

1. 首先使用getBoundingClientRect函数来获取canvas的边距。
2. 使用鼠标的坐标来与left与top值做差，并以字面量对象的方式返回。
   
   当我们获取到了canvas中的坐标后，后面在对精灵的操作过程中，将会更加的方便。
   

   ---

在游戏开发中，所需要的一些准备
既然是为了做游戏，那么这里将一些游戏中的小知识与常用技术简单讲一下。
1. 精灵
游戏中可操作的东西我们都成为精灵，这也是很多游戏引擎中都会使用spirit的原因，当然，精灵的说法是从英文翻译过来的。
2.绘图
无论是游戏还是影视，绘图都是必不可少的部分，游戏引擎与动画引擎都可以被称为图形引擎，而首要的一部分我们都是需要在画布上绘制我们所需要的一切，如Text, Image,Polygon,这三个应该可以说囊括了所有的视觉因素。
3.动画
动画根据不同的视觉效果，分为补间动画，帧动画，动画在渲染的过程中是由GPU来渲染，GPU的质量将直接决定渲染的效果与效率，这也是为什么你的电脑使用MAYA与3D MAX来做大规模或者精细模型渲染的时候电脑会热与卡机，甚至当机重启。
4.一些基本的数物知识
数学的知识并不需要太多，至少你要会基本的计算，矩阵运算，在2D的处理部分，矩阵可以用来做一些较为复杂的图形变换与动画，而且你只要了解3维矩阵就可以了，在物理方面，你至少要有基本认知，知道重力，弹力，摩擦力以及运动的基本公式，游戏不是现实，做的太逼真往往不合适，所以在数值的处理上可以根据需要来改变(比如重力的g=9.8m/s2,但是画布里几乎不会存在10m的，所以，g我们可以设置为0.98cm/s2)
在其次，对于方向的了解需要深入一些，至少你要知道矢量的计算方式，矢量是什么。
暂且想到这么多，想到会继续补充

欢迎加入web图形学（canvas），群聊号码：160190246