Canvas学习笔记——动画中的三角学

示例1，跟随鼠标的键头：

 

需要掌握一个重要的公式，这个方法返回从 x 轴到点 (x,y) 之间的角度

Math.atan2(dy,dx);

关键代码：

 function Arrow() {

   this.x = 0;

   this.y = 0;

   this.rotate = 0;

   this.color = '#ffff00';

 }

 Arrow.prototype.draw = function(context) {

   context.save();

   context.translate(this.x, this.y);

   context.rotate(this.rotate);

   context.fillStyle = this.color;

   context.lineWidth = 2;

   context.beginPath();

   context.moveTo( - 50, -25);

   context.lineTo(0, -25);

   context.lineTo(0, -50);

   context.lineTo(50, 0);

   context.lineTo(0, 50);

   context.lineTo(0, 25);

   context.lineTo( - 50, 25);

   context.closePath();

   context.fill();

   context.stroke();

   context.restore();

 };

 var canvas = document.getElementById('c'),

 context = canvas.getContext('2d'),

 mouse = utils.captureMouse(canvas),

 arrow = new Arrow();

 arrow.x = canvas.width / 2;

 arrow.y = canvas.height / 2;

 (function draw() {

     window.requestAnimFrame(draw, canvas);

     context.clearRect(0, 0, canvas.width, canvas.height);

     var dx = mouse.x - arrow.x,

     dy = mouse.y - arrow.y,

     rotate = Math.atan2(dy, dx);

     arrow.rotate = rotate;

     arrow.draw(context);

 })();

示例2，平滑运动：

关键代码

yPos = centerY + Math.sin(angle) * range;

angle += 0.1;

示例3，脉冲运动：

需要注意，这里不需要清除画布，并且在开始绘制时应该使用beginPath()

 

示例4，圆周运动：

 

 

//

圆周运动的要点是用正弦来计算x坐标，余弦来算y坐标，椭圆则是x轴的运动和y轴的半径不同。