canvas实现跟随鼠标旋转的箭头 - Jone_chen_H5之家 - 中国HTML5教程资源分享第一站

<!DOCTYPE html>

<html>

<head>

<title>canvas实现跟随鼠标旋转的箭头</title>

<style>

*{padding: 0;margin: 0}

</style>

</head>

<body>

var arrow=function () {

this.x=0;

this.y=0;

this.color="#f90"

this.rolation=0;

}

var canvas=document.querySelector('canvas')

var ctx=canvas.getContext('2d');

arrow.prototype.draw=function (ctx) {

ctx.save();

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

ctx.rotate(this.rolation)

ctx.fillStyle=this.color;

ctx.beginPath();

ctx.moveTo(0, 15);

ctx.lineTo(-50, 15);

ctx.lineTo(-50, -15);

ctx.lineTo(0,-15);

ctx.lineTo(0,-35);

ctx.lineTo(50,0);

ctx.lineTo(0,35);

ctx.closePath()

ctx.fill();

ctx.restore();

}

var Arrow=new arrow();

Arrow.x=canvas.width/2;

Arrow.y=canvas.height/2;

var c_x,c_y; //相对于canvas坐标的位置；

var isMouseDown=false;

Arrow.draw(ctx)

canvas.addEventListener('mousedown',function(e) {

isMouseDown=true;

},false)

canvas.addEventListener('mousemove',function(e) {

if(isMouseDown==true){

c_x=getPos(e).x-canvas.offsetLeft;

c_y=getPos(e).y-canvas.offsetTop;

//setInterval(drawFram,1000/60)

requestAnimationFrame(drawFram)

}

},false)

canvas.addEventListener('mouseup',function(e) {

isMouseDown=false;

},false)

function drawFram(){

var dx=c_x-Arrow.x;

var dy=c_y-Arrow.y;

Arrow.rolation=Math.atan2(dy,dx);

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

Arrow.draw(ctx)

}

function getPos(e) {

var mouse={x:0,y:0}

var e=e||event;

if(e.pageX||e.pageY){

mouse.x=e.pageX;

mouse.y=e.pageY;

}else{

mouse.x=e.pageX+document.body.scrollLeft+document.document.documentElement.scrollLeft;

mouse.y=e.pageY+document.body.scrollTop+document.document.documentElement.scrollTop;

}

return mouse;

}

</script>

</body>

</html>

不废话，直接上DEMO了，这个效果实现起来并不复杂，但是麻雀随小，五脏俱全，主要涉及到的知识点有：
1、canvas的基本绘图；
2、js各个事件的监听；
3、js动画；
4、三角函数结合js在canvas中的基本应用；