箭头随着手指滑动而旋转（一）
一、需求：
用canvas来实现一个箭头随着手指滑动而旋转
二、思路：
1.首先要写一个canvas绘制箭头的函数
2.写一个获取当前触摸点的坐标的函数
3.初始化箭头函数
4.随着触摸点的不停变化，获取到当前触摸点和箭头中心点的角度，然后用canvas不停绘制箭头
三、代码实现
1. arrow.js
function Arrow(){
this.x=0;
this.y=0;
this.color="#ff0";
this.rotation=0;
}
Arrow.prototype.draw=function(context){
context.save();
context.translate(this.x,this.y);
context.rotate(this.rotation);
context.lineWidth=2;
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.lineTo(-50,-25);
context.fill();
context.stroke();
context.restore();
}
2.utils.js
var utils={
captureMouse:function(element){
var mouse={x:0,y:0};
element.addEventListener("mousemove",function(e){
var x,y;
if(e.pageX||e.pageY){
x=e.pageX;
y=e.pageY;
}else{
x=e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
y=e.clientX+(document.documentElement.scrollTop||document.body.scrollTop);
}
x-=element.offsetLeft;
y-=element.offsetTop;
mouse.x=x;
mouse.y=y;
},false);
return mouse;
},
captureTouch:function(element){
var touch={x:null,y:null,isPressed:false}
element.addEventListener("touchstart",function(e){
touch.isPressed=true;
},false);
element.addEventListener("touchmove",function(e){
var x,y,
event=e.touches[0];
if(event.pageX||event.pageY){
x=event.pageX;
y=event.pageY;
}else{
x=event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
y=event.clientY+(document.documentElement.scrollTop||document.body.scrollTop);
}
x-=element.offsetLeft;
y-=element.offsetTop;
touch.x=x;
touch.y=y;
},false);
element.addEventListener("touchend",function(e){
touch.isPressed=false;
},false);
return touch;
}
}
3.inde.js
document.addEventListener("touchmove",function(e){
e.preventDefault();
},false);
var canvas=document.querySelector("#canvas");
canvas.width=document.documentElement.clientWidth||document.body.clientWidth;
canvas.height=document.documentElement.clientHeight||document.body.clientHeight;
var context=canvas.getContext("2d");
var mouse=utils.captureTouch(canvas);
var arrow=new Arrow();
arrow.x=canvas.width/2;
arrow.y=canvas.height/2;
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
var dx=mouse.x-arrow.x,
dy=mouse.y-arrow.y;
arrow.rotation=Math.atan2(dy,dx);
arrow.draw(context);
})();
4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
html,body{
height: 100%;
width:100%;
overflow: hidden;
}
body,canvas{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
<script src="js/arrow.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>
