Canvas 小知识点

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);