JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
// Angle between two points in radians, used in this example
function angleToPointRadians(point1, point2) {
return Math.atan2(point2.y - point1.y, point2.x - point1.x);
}
// Angle between two points in degrees, if you need it
function angleToPointDegrees(point1, point2) {
return (angleToPointRadians(point1, point2) * 180 / Math.PI);
}
// Get relative mouse position, based on canvas and event
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
// Global mouse position
var mousePosition = {
x: 0,
y: 0
};
// Make the canvas resize to the full size of the viewport
function fullSize(canvas) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
// The Arrow renderable type
function Arrow() {
this.angle = 0;
this.x = 0;
this.y = 0;
}
// The Arrow step method
Arrow.prototype.step = function(width, height) {
// Re-position the arrow on the center of the viewport
this.x = width / 2;
this.y = height / 2;
// Determine the angle between the mouse and this object, in radians.
this.angle = angleToPointRadians(mousePosition, this);
};
// The Arrow draw method
Arrow.prototype.draw = function(context) {
context.save();
// Apply the rotation to the canvas, with the arrow center X and Y as rotation origin
context.translate(this.x, this.y);
context.rotate(this.angle);
context.translate(-this.x, -this.y);
// Begin a path
context.beginPath();
// Draw the arrow
context.moveTo(this.x - 30, this.y);
context.lineTo(this.x + 30, this.y);
context.moveTo(this.x - 30, this.y);
context.lineTo(this.x - 15, this.y - 15);
context.moveTo(this.x - 30, this.y);
context.lineTo(this.x - 15, this.y + 15);
// Stroke the lines we just plotted
context.strokeStyle = '#cecece';
context.stroke();
// Finish the path
context.closePath();
context.restore();
};
window.addEventListener('load', function() {
var canvas = document.getElementById('test'),
context = canvas.getContext('2d'),
renderables = [],
arrow = new Arrow();
renderables.push(arrow);
fullSize(canvas);
window.addEventListener('resize', function() {
fullSize(canvas);
});
canvas.addEventListener('mousemove', function(e) {
mousePosition = getMousePos(canvas, e);
});
function animation() {
context.fillStyle = '#333';
context.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < renderables.length; i += 1) {
renderables[i].step(canvas.width, canvas.height);
}
for (var i = 0; i < renderables.length; i += 1) {
renderables[i].draw(context);
}
requestAnimationFrame(animation);
}
animation();
});