利用canvas绘制一个箭头 arrow,令箭头时刻朝向鼠标所在的方向,并缓慢向鼠标方向移动。
1、求出鼠标所在位置与箭头所在位置的 x、y 坐标轴的距离:
dx = mouse.x - arrow.x;
dy = mouse.y - arrow.y;
2、利用 atan2 反正切函数,求出鼠标与箭头所连成的直线的角度:
angle = Math.atan2(dy, dx);
3、让箭头依此角度旋转,使箭头朝向鼠标所在位置的方向:
arrow.rotation = angle;
4、已知箭头的加速度force,求出箭头在x、y轴上的加速度向量:
ax = Math.cos(angle) * force;
ay = Math.sin(angle) * force;
5、将求得的 ax、ay 分别加到 vx、vy 上,再把 vx、vy 和箭头的 x、y坐标值相加,实现箭头的加速移动
vx += ax;
vy += ay;
arrow.x += vx;
arrow.y += vy;
完整实现代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width">
<title></title>
<style>
*{margin: 0;padding: 0}
body {
background-color: #eee
}
canvas {
background-color: #fff
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
<script>
(function(){
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(e){
return !!e.getContext;
}
function canvasApp(){
let canvas = document.getElementById("canvas");
if(!canvasSupport(canvas)){
return ;
}
// start
let context = canvas.getContext("2d");
drawScreen(canvas, context);
}
// write your codes
function drawScreen(canvas, context){
let arrow = new Arrow();
let mouse = captureMouse(canvas);
let vx = 0;
let vy = 0;
let force = 0.05;
let dx = 0, dy = 0;
let ax = 0, ay = 0;
let angle = 0;
arrow.x = canvas.width / 2;
arrow.y = canvas.height / 2;
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
dx = mouse.x - arrow.x;
dy = mouse.y - arrow.y;
angle = Math.atan2(dy, dx);
ax = Math.cos(angle) * force;
ay = Math.sin(angle) * force;
arrow.rotation = angle;
vx += ax;
vy += ay;
arrow.x += vx;
arrow.y += vy;
arrow.draw(context);
} ())
}
})();
</script>
<script>
function Arrow(rotation) {
this.x = 0;
this.y = 0;
this.color = "#00ff00";
this.rotation = 0;
}
Arrow.prototype.draw = function(context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.fillStyle = this.color;
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.restore();
}
</script>
<script>
// 获取鼠标的位置坐标
function captureMouse(element){
var mouse = {x: 0, y: 0, event: null},
body_scrollLeft = document.body.scrollLeft,
body_scrollTop = document.body.scrollTop,
element_scrollLeft = document.documentElement.scrollLeft,
element_scrollTop = document.documentElement.scrollTop,
offsetLeft = element.offsetLeft,
offsetTop = element.offsetTop;
element.addEventListener("mousemove", function(){
var x, y;
if(event.pageX || event.pageY){
x = event.pageX;
y = event.pageY;
}else{
x = event.clientX + body_scrollLeft + element_scrollLeft;
y = event.clientY + body_scrollTop + element_scrollTop;
}
x -= offsetLeft;
y -= offsetTop;
mouse.x = x;
mouse.y = y;
mouse.event = event;
}, false);
return mouse;
};
</script>
</body>
</html>