html5 canvas实现跟随鼠标旋转的箭头

本文实例为大家分享了

xml/html code
复制内容到剪贴板

<!doctype html>
<html>
<head>
<meta charset=“utf-8” />
<meta http-equiv=“x-ua-compatible” content=“ie=edge” />
<title>canvas实现跟随鼠标旋转的箭头</title>
<style>
*{padding: 0;margin: 0}
</style>
</head>
<body>
<canvas width=“500” height=“500” style=“border: 1px solid #555; display: block;margin: 0 auto;”></canvas>
<script>
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 ee=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地址：http://codepen.io/jonechen/pen/ezpgwd

不废话，直接上demo了，这个效果实现起来并不复杂，但是麻雀随小，五脏俱全，主要涉及到的知识点有：

1、canvas的基本绘图；
2、js各个事件的监听；
3、js动画；
4、三角函数结合js在canvas中的基本应用；

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：

黄山市民网：https://www.huangshanshimin.com/

相关文章