动量即是“物体运动的量”，是物体的质量和速度的乘积，是矢量，能够反应出运动的效果，一般用 p 表示。举个例子，低速运动的重物，跟高速运动的子弹，拥有相同的威力。

模拟场景：已知一个中心点（centerX, centerY），旋转前物体ball（x1, y1），旋转弧度（rotation）；求旋转后物体（x2, y2）。（如下图）

【科普】重力加速度是一个物体受重力作用的情况下所具有的加速度。也叫自由落体加速度，用 g 表示。方向竖直向下。通常指地面附近物体受地球引力作用在真空中下落的加速度，记为 g。为了便于计算，其近似标准值通常取为 980 厘米/秒的二次方或 9.8 米/秒的二次方。

假定物体是个圆形，如图其圆心坐标即是物体的 x 轴和 y 轴坐标。 越界是常见的场景，一般会有两种场景的越界：一是整个物体移出区域；二是物体接触到区域边界。我们以画布边界为例进行讨论，示例中矩形边界即是：

【科普】速度是描述物体运动快慢和方向的物理量。物理学中提到物体的速度通常是指其瞬时速度。速度在国际单位制中的单位是米每秒，国际符号是 m/s，中文符号是米/秒。相对论框架中，物体的速度上限是光速。

你如果认为 canvas 只是画图工具，那接下来的操作会颠覆你的认知。 canvas 提供 api 可以获取画布上任何一个像素，并可以自由的操作他们。

先从老朋友 CSS 讲起我们熟悉的 CSS 风格颜色表示方式，大体有下面几种，canvas 大体是直接沿用这些写法的，但最后包含透明度的写法有些许不同。#RRGGBB：十六进制格式，红绿蓝分别用两位十六进制数表示。#RGB：简写的十六进制格式，转换成 6 位格式时会重复三原色，例如#fb0->#ffbb00。rgb(R,G,B)：函数表达式，三原...

canvas 的 API 有很多，如果一一列举 30 分钟你是绝对看不完的，而且怎么流水账还不如自己去看文档呢（笑），本教程的思路是用实例一步一步从无到有讲解基础用法。canvas相关文档

本系列虽说是基础教程，但这是相对动画/游戏领域来说，在前端领域算是中级教程了，不适合前端小白或萌新。阅读前请确保自己对前端三大件（JavaScript+CSS+HTML）的基础已经十分熟悉，而且有高中水平的数学和物理知识。demo 采用 ES6 编写，遵循 Airbnb 规范，不依赖第三方框架或库，请在现代浏览器里运行。大部分例子来...