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

 1 function Arrow() {
 2   this.x = 0;
 3   this.y = 0;
 4   this.rotate = 0;
 5   this.color = ‘#ffff00‘;
 6 }
 7 
 8 Arrow.prototype.draw = function(context) {
 9   context.save();
10   context.translate(this.x, this.y);
11   context.rotate(this.rotate);
12   context.fillStyle = this.color;
13   context.lineWidth = 2;
14 
15   context.beginPath();
16   context.moveTo( - 50, -25);
17   context.lineTo(0, -25);
18   context.lineTo(0, -50);
19   context.lineTo(50, 0);
20   context.lineTo(0, 50);
21   context.lineTo(0, 25);
22   context.lineTo( - 50, 25);
23   context.closePath();
24 
25   context.fill();
26   context.stroke();
27   context.restore();
28 };
29 
30 var canvas = document.getElementById(‘c‘),
31 context = canvas.getContext(‘2d‘),
32 mouse = utils.captureMouse(canvas),
33 arrow = new Arrow();
34 
35 arrow.x = canvas.width / 2;
36 arrow.y = canvas.height / 2;
37 
38 (function draw() {
39     window.requestAnimFrame(draw, canvas);
40     context.clearRect(0, 0, canvas.width, canvas.height);
41 
42     var dx = mouse.x - arrow.x,
43     dy = mouse.y - arrow.y,
44     rotate = Math.atan2(dy, dx);
45 
46     arrow.rotate = rotate;
47 
48     arrow.draw(context);
49 })();