Canvas元素大小与绘图表面的大小
默认情况下，浏览器所创建的canvas元素是width:300px，height:150px。我们可以通过使用css或者直接指定canvas的宽高来修改
css 方式
直接指定属性 width 和 height
使用css来设置canvas的大小，与直接设置属性相比，这里的差别：canvas元素实际上有两套尺寸，一个是元素本身的大小，还有一个是元素绘图表面的大小
当我们设置元素的width和height属性时，实际上是同时修改了元素的本身的大小和元素绘图表面的大小
如果是用css来指定大小，就只会改变元素大小，不会影响到绘图表面。这里浏览器就将绘图表面从默认值拉伸到css指定的值
所以最好全部都采用直接指定width和height的方式来修改canvas的大小
Canvas状态的保存与恢复
- save：将当前canvas状态推送到一个保存canvas状态的堆栈顶部。例如当前坐标变换信息、剪辑区域、所有绘图环境对象的属性
- restore：将canvas状态堆栈顶部的条目弹出
在调用save() 与 restore() 方法之间，对canvas状态所进行的修改，其效果只会持续至restore() 方法调用之前
三角函数
角度与弧度转换公式
- 180度 = π弧度
- 1弧度 = (π/180) * 度
- 1度 = (180 / π) * 弧度
正弦：在直角三角形中，任一锐角∠A的对边与斜边的比叫做∠A的正弦，记作sinA，即sianA = ∠A的对边/斜边 也就是y值 = sianA * 半径
余弦: 任一锐角∠A的临边与斜边的比，纪作cosA， 即 cosA = ∠A的临边 / 斜边， 也就是x值 = cosA * 半径
离屏canvas
使用离屏canvas，通常有以下几个步骤
- 创建用作离屏canvas的元素
- 设置离屏canvas的宽度与高度
- 在离屏canvas中进行绘制
- 将离屏canvas的全部或一部分内容复制到正在显示的canvas中
延迟执行动画
var start = 0
function print(now){
if(now - start > 500){ // 每秒二次
start = now;
console.log('dot')
}
requestAnimationFrame(print)
}
print()
运动公式
// 任意方向速度
vx = speed * Math.cos(angle);
vy = speed * Math.sin(angle);
// 任意方向加速度
ax = force * Math.cos(angle);
ay = force * Math.sin(angle);
// 改变速度
vx += ax;
vy += ay;
// 改变位置
object.x += vx;
object.y += vy;
边界环绕
// 边界环绕
if(obj.x - obj.width/2 > canvas.width){
spaceShip.x = 0;
}
if(obj.x < 0){
obj.x = canvas.width;
}
if(obj.y - obj.height/2 > canvas.height){
obj.y = 0
}
if(obj.y < 0){
obj.y = canvas.height;
}
物体旋转
x1 = (x - x2) * cos(rotation) - (y - y2) * sin(rotation);
y1 = (y - y2) * cos(rotation) + (x - x2) * sin(rotation);
x,y为当前物体的坐标，x2,y2是当前旋转的中心点，rotation是旋转的弧度
x1,y1 是当前坐标旋转后的坐标值
两个物体之间的夹角
var dy = x2 - x1;
var dx = y2 - y1;
var angle = Math.atan2(dy,dx);
