html 画布鼠标点击状态,HTML5 Canvas一直指向鼠标方向的箭头

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

});